Reference: http://www.w3schools.com/ajax/default.asp

Ajax.mkd

#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;
    }
  });
}