AJAX

INTRO :

Asynchronous JavaScript and XML is a term coined by Jesse James Garrett in 2005. Ajax model is a combination of technologies including HTML, CSS, JavaScript, DOM, XML and XMLHttpRequest object.

why AJAX ? :

AJAX helps us to make quick incremental updates without reloading the entire web page, by exchanging the data with web server behind the scenes.

XMLHttpRequest :

The XMLHttpRequest objects are the crucial part of AJAX. These are used to interact with the web servers behind the scenes, this enables us to update a part of the webpage without reloading th entire page.

Create an XMLHttpRequest :

syntax : variable = new XMLHttpRequest( );

• Eg.* : xhr = new XMLHttpRequest( );

Properties of XMLHttpRequest :

1. XMLHttpRequest.onreadystatechange : This property contains the event handler to be called when readystate property changes.

   syntax : XMLHttpRequest.onreadystatechange = callback;

2. XMLHttpRequest.onreadystate : This property returns the state of the XMLHttpRequest

   0 ==> Client has been created. open() not yet called.
   1 ==> open() called, server connection is established.
   2 ==> send() called, request received.
   3 ==> Downloading; processing request.
   4 ==> Done. request finished.

3. XMLHttpRequest.responseText : This property returns a DOM string which contains a textual data or null is if the request failed.

syntax : var result = XMLHttpRequest.responseText;

1. XMLHttpRequest.status : This property returns the status of the request.

   200 ==> "OK"
   403 ==> "Forbidden"
   404 ==> "Not Found"

Methods of XMLHttpRequest :

1. Abort() : This method aborts the request i.e., sent and readystate is changed to 0.

   syntax : XMLHttpRequest.abort();

2. getAllResponseHeaders() : This method returns all the response headers as a string or null if no response is received, if network error happens it returns "".

   syntax : var headers =
   XMLHttpRequest.getAllResponseHeaders();

3. getResponseHeader() : This method returns the string of a particular headers value. If there are multiple response headers with same name then a single concatenated string is returned where the strings are separated by comma.

   syntax : var myHeader =
   XMLHttpRequest.getResponseHeader();

4. open(method, url, async, user, psw) : This method initializes a newly created request, or re-intializes the existing one.

   syntax : XMLHttpRequest.open(method, url, async, user,
   psw);

   method : type of request such as "GET","POST","PUT","DELETE"
   e.t.c
   url : file location
   async : true(asynchronous), false(synchronous).
   user : optional username used for authentication purposes.
   password : optional password used for authentication purposes.

5. send() : It sends the request to the server, used for "GET".

6. send(string) : It sends the request to the server, used for "POST".
   syntax : XMLHttpRequest.send(body)

Get Request

This is a simple get request, to request the data from a specified source.

Eg : xhr.open("GET", "url");
xhr.send();

Post Request

This is a simple post request, this is to send the data to a server to create or update the resource.

Eg : xhr.open("POST", "url");
xhr.send();