Last active
December 17, 2015 18:49
-
-
Save roden0/5655912 to your computer and use it in GitHub Desktop.
AJAX demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.onload = function() { | |
| var url = "http://example.org/address_from_postcode.txt?postcode="; | |
| var fieldsets = document.getElementsByTagName("fieldset"); | |
| for (var foo in fieldsets) { | |
| if (fieldsets[foo].className == "address") { | |
| var textareas = fieldsets[foo].getElementsByTagName("textarea"); | |
| for (var bar in textareas) { | |
| if (textareas[bar].className == "address") { | |
| fieldsets[foo].address = textareas[bar]; | |
| break; | |
| }} | |
| if (fieldsets[foo].address) { | |
| var inputs = fieldsets[foo].getElementsByTagName("input"); | |
| for (var bar in inputs) { | |
| if (inputs[bar].className == "lookup") { | |
| inputs[bar].http = getHTTPObject(); | |
| inputs[bar].working = false; inputs[bar].onclick = lookupAddress; | |
| } | |
| if (inputs[bar].className == "postcode") { | |
| fieldsets[foo].postcode = inputs[bar]; | |
| } | |
| } | |
| }else { | |
| alert("No address textarea defined within address fieldset!"); | |
| } | |
| } | |
| } | |
| function lookupAddress() { | |
| if (!this.working) { | |
| var http = this.http; | |
| var address = this.parentNode.address; | |
| this.http.open("GET", url + escape(this.parentNode.postcode.value), true); | |
| this.http.onreadystatechange = function() { | |
| if (http.readyState == 4) { | |
| this.working = false; address.innerHTML = http.responseText; | |
| } | |
| } | |
| this.http.send(null); | |
| this.working = true; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/javascript" language="javascript"> | |
| var http_request = false; | |
| function makeRequest(url) { | |
| http_request = false; | |
| if (window.XMLHttpRequest) { // Mozilla, Safari,... | |
| http_request = new XMLHttpRequest(); | |
| if (http_request.overrideMimeType) { | |
| //MimeType | |
| http_request.overrideMimeType('text/xml'); | |
| } | |
| } else if (window.ActiveXObject) { // IE | |
| try { | |
| http_request = new ActiveXObject("Msxml2.XMLHTTP"); | |
| } catch (e) { | |
| try { | |
| http_request = new ActiveXObject("Microsoft.XMLHTTP"); | |
| } catch (e) {} | |
| } | |
| } | |
| if (!http_request) { | |
| alert('No es posible crear un objeto XMLHTTP'); | |
| return false; | |
| } | |
| http_request.onreadystatechange = alertContents; | |
| http_request.open('GET', url, true); | |
| http_request.send(null); | |
| } | |
| function alertContents() { | |
| if (http_request.readyState == 4) { | |
| if (http_request.status == 200) { | |
| alert(http_request.responseText); | |
| } else { | |
| alert('Hubo problemas con la petición.'); | |
| } | |
| } | |
| } | |
| </script> | |
| <span style="cursor: pointer; text-decoration: underline" onclick="makeRequest('test.html')"> | |
| Hacer una petición | |
| </span> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> | |
| <head> | |
| <title>Your details</title> | |
| <script type="text/javascript" src="address.js"></script> | |
| </head> | |
| <body> | |
| <form method="post" action="process.php"> | |
| <fieldset class="address"> | |
| <input type="text" name="address[postcode]" class="postcode" /> | |
| <input type="button" value="Lookup address" class="lookup" /> | |
| <textarea class="address"></textarea> | |
| </fieldset> | |
| <fieldset> | |
| <input type="submit" value="Save" /> | |
| </fieldset> | |
| </form> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment