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.

AJAX - An introduction


Published on

Published in: Software
  • Be the first to comment

AJAX - An introduction

  1. 1. AJAX: an introduction Eleonora Ciceri Ph.D student – Politecnico di Milano
  2. 2. JavaScript: pros… ¤  Advantages of JavaScript ¤  Reactive web interfaces: similar to desktop applications ¤  Avoid page refresh: content is modified dynamically, without changing the page ¤  Communication with the server is limited: the content updates are executed at client side ¤  The browser is used as an universal client Each click on the page modifies the page content The server generates the content at request time
  3. 3. … JavaScript: cons ¤  Problems of JavaScript ¤  Inconsistencies between different interpreters: different browsers might behave differently ¤  Complex debugging: debug in console ¤  Security problems: see “JavaScript” slides ¤  Memory usage: everything is running at client side
  4. 4. AJAX ¤  AJAX = Asynchronous JavaScript And XML ¤  This is not a new technology, but a mixture of different technologies ¤  Objective: improve the Web usability HTML (presentation) CSS (presentation) XML (interchange of data) XMLHttpRequest (asynchronous communication) JavaScript (bind together the other technologies)
  5. 5. AJAX principles ¤  Use JavaScript for user interaction handling ¤  Move processing and data on the browser ¤  Reduce the client-server communication Reduced conversation ü  Data processing ü  Page update
  6. 6. AJAX vs. RIA ¤  AJAX is one of the techniques used for building Rich Internet Applications (RIA) ¤  Similar techniques: Flash, Java ¤  A Rich Internet Application: ¤  Is a Web application ¤  Has features similar to the ones of desktop applications ¤  Is executed in a browser ¤  Does not require an installation ¤  Works both in online and offline modalities
  7. 7. AJAX vs. RIA: the decision tree HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
  8. 8. AJAX vs. RIA: the decision tree ü  JavaScript is available “out-of-the-box” ü  It works on computers / mobile devices HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
  9. 9. AJAX vs. RIA: the decision tree ü  Maintainability ü  Reliability ü  Availability ü  Scalability HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
  10. 10. AJAX vs. RIA: the decision tree ü  Attractiveness ü  No (or few?) support for mobile devices HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
  11. 11. AJAX: guarantee industrial strength ¤  It is preferable to limit the amount of code that needs to be run in the shaky JavaScript environment ThinFat
  12. 12. RIA vs. classical applications Classical application Rich Internet Application HTTP request HTTP response HTTP request HTTP response Asynchronous request Asynchronous response Incremental update of the page
  13. 13. RIA: advantages ¤  User interaction ¤  Behaviour is similar to the one of the desktop applications ¤  Reactivity, i.e., we don’t have to operate a request to the server each time the user clicks on the page ¤  Performance ¤  Tasks are equally divided between client and server (avoid both fat client and fat server) ¤  Asynchronous communication (e.g., prefetching) ¤  Limited communication = limited bandwidth
  14. 14. RIA: disadvantages ¤  User interaction ¤  Bookmark usage (how to integrate a dynamic application with bookmark handling) ¤  Integration with crawlers, e.g., search engines ¤  Performance ¤  Security (from JavaScript) ¤  Performance and Maintenance (e.g., scripts dimension)
  15. 15. AJAX Syntax
  16. 16. What is XMLHttpRequest? ¤  XMLHttpRequest is an object used to: ¤  Send HTTP (or HTTPS) requests to a web server ¤  Load the server response data back into the script ¤  The name is misleading, since any textual data can be received from the servers ¤  Common formats: XML, JSON, HTML, plain text ¤  Security issues: requests succeed only if they are made to the same server that served the original web page
  17. 17. Create an XMLHttpRequest object ¤  All modern browsers have a built-in XMLHttpRequest object ¤  Create it with modern browsers ¤  Create it with old versions of IE (IE5,IE6) (The horror, the horror!) variable = new XMLHttpRequest();! variable = new ActiveXObject(“Microsoft.XMLHTTP”);!
  18. 18. XMLHttpRequest: send a request to a server ¤  The send and open methods of the XMLHttpRequest object are used in order to send a request to a server ¤  A request is used to exchange data with a server, URL, async)! Request type (GET, POST) Location of file on the server true if the request is asynchronous false if not xmlHttpRequest.send(string)! Only used for POST requests
  19. 19. GET requests or POST requests? ¤  GET is simpler and faster than POST, and can be used in most cases ¤  POST is useful to: ¤  Send a large amount of data to the server (since POST has not size limitations) ¤  Send user input (which can contain unknown characters), since POST is more robust and secure than GET
  20. 20. GET requests ¤  Standard GET request: ¤  When sending information is required:“GET”, URL, true)!“GET”, “URL?par1=value1”, true);! This is called query string and it is used to contain the data we want to send
  21. 21. POST requests ¤  Standard POST request: ¤  When sending information (like in forms) is required:“POST”, URL, true);!“POST”, URL, true);! xmlHttpRequest.setRequestHeader(“Content-type”, ! ! !“application/x-www-form-urlencoded”);! xmlHttpRequest.send(“par1=value1”);!
  22. 22. Asynchronous: true or false? ¤  Many of the tasks performed on the server are very time consuming ¤  Before AJAX, this operation could cause the application to hang or stop ¤  With AJAX the JavaScript does not have to wait for the server response; it can instead: ¤  Execute other scripts while waiting for the server response ¤  Deal with the response when it is ready
  23. 23. Server response ¤  To get the response from a server, use the responseText or responseXML property of XMLHttpRequest! ¤  Two ways of doing it: ¤  responseText: get the response data as a string ¤  responseXML: get the response data as XML data
  24. 24. Server response: responseText! ¤  The text is downloaded from the server ¤  JavaScript can be used to insert it inside the page ¤  How to update the page content to insert the text: document.getElementById(“id”).innerHTML = ! ! !xmlHttpRequest.responseText;!
  25. 25. Server response: responseXML! ¤  How to parse the XML response of the server and include it in the HTML page ¤  Since XML is a structured document, it needs to be parsed and integrated in the page by converting it in HTML code xmlDoc = xmlHttpRequest.responseXML;! txt = “”;! x = xmlDoc.documentElement.getElementsByTagName(“ARTIST”);! for (i = 0; i < x.length; i++)! txt = txt + x[i].childNodes[0].nodeValue + “<br />”;! document.getElementById(“id”).innerHTML = txt;!
  26. 26. The onreadystatechange event ¤  The request status can be monitored by checking some properties of the XMLHttpRequest object ¤  XMLHttpRequest.readyState keeps track of the request status (see next slide) ¤  XMLHttpRequest.onreadystatechange refers a function called every time XMLHttpRequest.readyState changes ¤  XMLHttpRequest.status is 200 when the response is OK and 404 when the page is not found
  27. 27. Values for XMLHttpRequest.readyState! 0: connection not initialized 1: connection initialized (asynchronous request) 4: complete response 3: send response 2: compute response 5: page update
  28. 28. Calling XMLHttpRequest.onreadystatechange! xmlHttpRequest.onreadystatechange = function() {! if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)! document.getElementById(“id”).innerHTML = ! ! ! ! !xmlHttpRequest.responseText;! }! This function is automatically called when XMLHttpRequest.readyState is changed Retrieve the response in order to store it in the HTML page
  29. 29. onreadystatechange with callback functions ¤  A callback function is a function passed as a parameter to another function ¤  Useful when more than one AJAX task are used on the website, and one standard function is written for creating the XMLHttpRequest object
  30. 30. onreadystatechange with callback functions function myFunction() {! loadXMLDoc(URL, function() {! if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)! document.getElementById(“id”).innerHTML = xmlHttpRequest.responseText;! });! }! !
  31. 31. References
  32. 32. References ¤ ¤  AJAX explained: ajax_xmlhttprequest_create.asp