Ajax tutorials with examples

Ajax (Asynchronous javascript and xml)

Ajax is used to refresh the partial page instead of refreshing the whole page.
Ajax is used to achieve the more interaction.

3 pillers

1. javascript
2. xml
3. xhr object(XmlHttpRequest object)
Ajax process:

1. Calling ajax function (its like normal javascript calling)

2. Creating xhr object.(based on the browser types)

xhr object is created based on browsers,

If IE browser then xhr object shoule be created using ACTIVEX method.And for other browsers it should be created by native method.

3. xhrobject.open(GET/POST, url,TRUE(asynchronous)) – to initialize the connection.

4. xhrobject.send(null) – to send the request to server (null for GET Method and String values for POST Method).

5. do the business logics and call the onreadystatechange function to present the data.
we should check the readystate is 4 and 200 for successful reply from server.

(XmlHttpRequest)xhr properties:

1. onreadystatechange (event handler for the object, it calls a function when the state of object changed)

2. readyState (current status of the object)
0-uninitialized
1-loading
2-loaded 3- interactive 4-complete
0,1,2 – empty string

3. responseXml (xml document should be parsed using dom or sax)

4. responseText

5. status (200- successs 500-server compilation error 404-page not found)

6. statusText (same like status “ok” is equal to 200)
xhr methods:

1. Open() (to initialize the connection)(GET/POST,URL,TRUE(ASYNCHRONOUS))
URL Should be present in web.xml

2. Send() (Posting the request with null(GET) or value(String value))

3. Abort()

4. getResponseHeader(label) (tells about the architecture values like content type, length, modified date etc..(anyone))

5. getAllResponseHeaders() (skeleton of the all the responses(everything))

6. SetRequestHeader(label, value) (to pass the encoded values to POST)

 

GET & POST METHOD IN DETAILS:

GET: open(),send(null)

POST: open(),setRequestHeader(),Send(params)

good practise to use these three lines if we use POST method:

setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

//include this for post or it won’t work!!!!

setRequestHeader(“Content-Length”,params.length);
setRequestHeader(“Connection”,”close”);

Note: should call these methods with the help of xhr objects.

 

 

Thanks for reading this post…………….!!!