Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Asynchronous javascript and xml , it is a technology which speeds up web applications

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. AJAX<br />Bharath. P Information Science dept.<br />Sapthagiri college of engineering<br />
  2. 2. What is AJAX?<br />Overview<br />History<br />How it works?<br />Request phase implementation<br />Response phase implementation<br />Examples of Request and Response phase<br />Advantages and Disadvantages<br />Agenda<br />
  3. 3. Asynchronous Javascript and XML.<br />It is a client-side technology that combines a set of known technologies in order to create faster and more user friendly web pages.<br />It provides responsiveness approaching to that of desktop applications.<br />What is AJAX?<br />
  4. 4. AJAX is meant to speed web apps that have frequent user interactions.<br />Technologies used mainly are javascirpt, xml, DOM, css…<br />It shortens the required time for both document transmission and document rendering.<br />When browser requests a new part of its displayed document from the server, it doesn’t lock up waiting for response, thus its Asynchronous.<br />Overview<br />
  5. 5. Use of <iframe> element which is made invisible by setting width and height to zero, although this worked, it was not elegant.<br />Microsoft introduced 2 extensions to DOM with XmlDocument and XmlHtml (XmlHttpRequest) objects.<br />It got popular from 2005/06 with google maps and gmail popularizing it.<br />History<br />
  6. 6. How it works?<br />
  7. 7. Object declaration of type XmlHttpRequest.<br />Registering function that implements the receive phase of the application using onreadystatechange property.<br />Call to open method to set parameters (Http method, URL of response document on the server, Asynchronous or synchronous) for HttpRequest.<br />Call to send method to send the HttpRequest to server.<br />Request phase implementation<br />
  8. 8. Check value of callback from server to see whether processing of request is completed.<br />Get the response using responsetext property of XmlHttprequest object.<br />Display the output in a desired way.<br />Response phase implementation<br />
  9. 9. Varxhr= new XmlHttpRequest();<br />xhr.onreadystatechange= response;<br />“GET”, “reply.php?....”,true);<br />xhr.send(null);<br />Example of Request phase<br />
  10. 10. Function response()<br /> {<br /> if(xhr.readystate == 4) {<br />var result=xhr.responsetext;<br /> // any desired code<br /> }<br />Example of Response phase<br />
  11. 11. Independent of server technology.<br />Apart from obtaining the XMLHTTP object, all processing is same for all browser types, because Javascript is used.<br />Permits the development of faster and more interactive desktop like interface to users.<br />Advantages<br />
  12. 12. 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.<br />Requests ActiveX to be enabled in IE 5 and 6Is only available in newer versions of Opera, firefox and Safari<br />Has small implementation differences between browsers<br />Disadvantages<br />
  13. 13. Thank you<br />