#AJAX
##Create an XMLHttpRequest Object
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
##Send a Request To a Server
xmlhttp.open("GET", "example_ajax.txt", true);
xmlhttp.send();
###xmlhttp.open(method, url, async);
-
method: the type of request: GET or POST
-
url: the location of the file on the server
-
async: true (asynchronous) or false (synchronous)
###xmlhttp.send(string);
- string: only used for POST requests
###xmlhttp.setRequestHeader(header, value);
-
header: specifies the header name
-
value: specifies the header value
xmlhttp.open
xmlhttp.open("GET", "get.asp?t=" + Math.random(), true);
xmlhttp.send();
xmlhttp.open("POST", "post.asp", true);
xmlhttp.send();
xmlhttp.open("POST", "sample.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Shin&lname=Kane");
When using async=truem, specify a function to execute when the response is ready in the onreadystatechange event.
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("example").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "example_ajax.txt", true);
xmlhttp.send();
To use async=false, change the third parameter in the open() method to false.
Using async=false is not recommended, but for a few small requests this can be ok.
xmlhttp.open("GET", "example_ajax.txt", false);
xmlhttp.send();
document.getElementById("example").innerHTML = xmlhttp.responseText;
##Server Response
###responseText
- get the response data as a string
xmlhttp.responseText
document.getElementById("example").innerHTML = xmlhttp.responseText;
###responseXML
- get the response data as XML data
xmlhttp.responseXML
var xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("ARTIST");
for (var i = 0, txt = "", y; y = x[i++];) {
txt += y.childNodes[0].nodeValue + "<br />";
}
document.getElementById("example").innerHTML = txt;
###The onreadystatechange event
-
onreadystatechange: Stores a function (or the name of a function) to be called automatically each time the readyState property changes
-
readyState: Holds the status of the XMLHttpRequest. Changes from 0 to 4:
- 0: request not initialized
- 1: server connection established
- 2: request received
- 3: processing request
- 4: request finished and response is ready
-
status:
- 200: "OK"
- 404: Page not found
xmlhttp.onreadystatechange
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("example").innerHTML = xmlhttp.responseText;
}
}
Using a callback function
var xmlhttp;
function loadXMLDoc(url, cb) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = cb;
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction() {
loadXMLDoc("example_ajax.txt", function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("example").innerHTML = xmlhttp.responseText;
}
});
}