1. AJAX Bharath. P Information Science dept. Sapthagiri college of engineering

2. Agenda • What is AJAX? • Overview • History • How it works? • Request phase implementation • Response phase implementation • Examples of Request and Response phase • Advantages and Disadvantages

3. What is AJAX? • Asynchronous Javascript and XML. • It is a client-side technology that combines a set of known technologies in order to create faster and more user friendly web pages. • It provides responsiveness approaching to that of desktop applications.

4. Overview • AJAX is meant to speed web apps that have frequent user interactions. • Technologies used mainly are javascirpt, xml, DOM, css… • It shortens the required time for both document transmission and document rendering. • When browser requests a new part of its displayed document from the server, it doesn’t lock up waiting for response, thus its Asynchronous.

5. History • Use of <iframe> element which is made invisible by setting width and height to zero, although this worked, it was not elegant. • Microsoft introduced 2 extensions to DOM with XmlDocument and XmlHtml (XmlHttpRequest) objects. • It got popular from 2005/06 with google maps and gmail popularizing it.

6. How it works?

7. Request phase implementation • Object declaration of type XmlHttpRequest. • Registering function that implements the receive phase of the application using onreadystatechange property. • Call to open method to set parameters (Http method, URL of response document on the server, Asynchronous or synchronous) for HttpRequest. • Call to send method to send the HttpRequest to server.

8. Response phase implementation • Check value of callback from server to see whether processing of request is completed. • Get the response using responsetext property of XmlHttprequest object. • Display the output in a desired way.

9. Example of Request phase • Varxhr= new XmlHttpRequest(); xhr.onreadystatechange= response; xhr.open(“GET”, “reply.php?....”,true); xhr.send(null);

10. Example of Response phase • Function response() { if(xhr.readystate == 4) { var result=xhr.responsetext; // any desired code }

11. Advantages • Independent of server technology. • Apart from obtaining the XMLHTTP object, all processing is same for all browser types, because Javascript is used. • Permits the development of faster and more interactive desktop like interface to users.

12. Disadvantages • The back button problem. People think that when they press back button, they will return to the last change they made, but in AJAX this does not hold. • Requests ActiveX to be enabled in IE 5 and 6Is only available in newer versions of Opera, firefox and Safari • Has small implementation differences between browsers

13. Thank you