AJAX 
Tags: ajax
Published: 2021-06-20 11:20:58

*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;

4. *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();