AJAX introduction and learning

What is AJAX

AJAX stands for Asynchronous JavaScript and XML.
AJAX is used to exchange data with server, and updating just part of webpage rather than updating whole page.

How ajax works
XMLHttpRequest object
Sending request to server
Receiving server response
onreadystatechange function
AJAX expamples - Call multiple functions with same XMLHttpRequest object.

---

How AJAX Works

• Creating XMLHttpRequest object (creating object)
• With that object send HttpRequest (sending request)
• Server will process HttpRequest
• Server creates response and send data back to browser.
• Browser process returned data using javascript (receiving resutl)
• Browser updates part of page.(displaying result)

---

AJAX - Creating an XMLHttpRequest Object

XMLHttpRequest object is used to exchange data with server and receiving response with help of that part of page can be updated.

All modern browser now a days supports the XMLHttpRequest object except some browsers like IE5 and IE6. IE5 and IE6 uses ActiveXObject.

All modern browsers like IE7+, Firefox, Chrome, Safari and Opera supports XMLHttpRequest object

Syntax

variable=new XMLHttpRequest();   

variable=new ActiveXObject("Microsoft.XMLHTTP");   // for older browsers (IE5 & IE6)

 Example

var xmlhttp;
if (window.XMLHttpRequest)
{
        // For IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
}
else
{
       // For IE5 & IE6
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

---

Sending Request to Server

To send request to server we use open() and send() methods

Syntax

xmlhttp.open(method, url, async);
xmlhttp.send();

Method	Description
open(method,url,async)	It specifies type of request, url for communication and asynchronous true of false. method : specifies request type GET or POST url : File location/ communicating file on server async : true - asynchronous and false - synchronous
send(string)	sending request to the server. string : It is used when the request method is POST

GET Request : 

GET simpler and faster than post. All the data which are to be sent, are appended to the url. no need to send any string with send method. It is mainly used in searching and updating small insecure data.

xmlhttp.open("GET","page.php?a=" +valueA+"&b="+valueB ,true);
xmlhttp.send();

POST Request

POST method is more secure and can send very large amount of data without displaying it in url.
To send Form data with POST we need to provide HTTP header with setRequestHeader(). and specify data into send which you want to send.

xmlhttp.open("POST","page.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("a="+valueA+"&b="+valueB); // valueA and valueB are javascript variables

Method	Description
setRequestHeader(header,value)	setting up request header. header : specifies header name/type value : specifies header value.

async - true or false

true : specifies that ajax runs asynchronously. And you must specify the onreadystatechange().

false : specifies that ajax runs synchronously. Javascript will not run until it receives the response from the server. If server is busy/slow it will hang up until response received.

 If you are using false then don't use onreadystatechange() function.

example for "true" (asynchronous)

xmlhttp.onreadystatechange=function()
{
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
}
xmlhttp.open("GET","page.php",true);
xmlhttp.send();

 if you use "false" instead "true" then just simply receive response after send();


example for "false" (synchronous)

xmlhttp.open("GET","page.php",true);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

---

Receiving Server Response

To receive response from server use responseText or responseXML property of XMLHttpReqest object.

responseText : get the response data as a string.
responseXML: get the response data as XML data.

---

onreadystatecnange event

When a request to a server is sent, we may want to perform some actions based on the response.
The onreadystatechange event is triggered every time the readyState changes.
The readyState property holds the status of the XMLHttpRequest.
Three important properties of the XMLHttpRequest object:

Method	Description
onreadystatechange	Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState	Holds status of the XMLHttpRequest. values are 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

examples

xmlhttp.onreadystatechange=function()
{
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
}

Check out Examples