Ajax/Javascript XMLHttpRequest tutorial

à 09:20 | Libellés : ,
The XMLHttpRequest Javascript object allow you to send and receive data asynchronously from a web server. Depending on the browser, the XMLHttpRequest object is instantiated differently. Here you can see the code for the creation of a XMLHttpRequest object that work on Safari, IE5.5+, Firefox and Opera :

function createXMLHttpRequest() {
if (typeof XMLHttpRequest != "undefined") {
return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
throw new Error("XMLHttpRequest not supported");
}
}
You can use the XMLHttpRequest as shown bellow to send a GET request to the server :

xmlhttp=createXMLHttpRequest();
xmlhttp.open("GET", "test.html", true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
xmlhttp.responseText;
xmlhttp.responseXML;
} else {
// HTTP error
}
}
}
xmlhttp.send(null);
You can use this code into a function and call it when a HTML event occurs (onload, onchange, onclisk, onmouseover, ...) to send and fetch data asynchronously, and then update you Web page dynamically.

You can also use the XMLHttpRequest as shown bellow to send a POST request to the server :

xmlhttp=createXMLHttpRequest();
xmlhttp.open("POST", "test.html", true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
xmlhttp.responseText;
xmlhttp.responseXML;
} else {
// HTTP error
}
}
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("urlencodedstring");
To send a POST request you just need to specify the content-type of the sent data with the setRequestHeader method of the XMLHttpRequest object. The sent data are passed as an argument of the send method. To properly encode the passed data, use the encodeURIComponent(StringToEncode) Javascript function.

XMLHttpRequest object Properties
  • onreadystatechange : Define here the callback function for your request / javascript event.
  • readyState : State of the processing request.
  • responseText : Response in text format.Read only.
  • responseXML : Response in XML format.Read only.
  • status : HTTP response status.
XMLHttpRequest object Methods
  • abort() : abort the processing request.
  • getAllResponseHeaders() : Return the array of the HTTP response headers.
  • getResponseHeader(headerName) : Return the specified HTTP response header.
  • open(method, url[, asynchronously[, user[, password]]]) : Initialise the request for the specified HTTP method, URL (url), asynchronously (true ou false) and with a username and password if provided.
  • send(data) : send the HTTP request with the provided data.
  • setTimeouts(timeout) : Maximum acceptable time to wait before the server response is received.
  • setRequestHeader(headerName, headerValue) : Set a special header.
Commons HTTP response status
  • 200 OK
  • 301 Moved permanently
  • 302 Found
  • 303 See Other
  • 403 Forbidden
  • 404 Not Found