SlideShare a Scribd company logo

AJAX - An introduction

•
•
Eleonora Ciceri
Eleonora Ciceri

This document provides an introduction and overview of AJAX (Asynchronous JavaScript and XML). It discusses the advantages of JavaScript, including how AJAX allows for reactive web interfaces similar to desktop applications by avoiding full page refreshes. The key principles of AJAX are outlined, including using JavaScript for user interactions, processing data in the browser, and reducing client-server communication. AJAX is described as a technique used to build Rich Internet Applications (RIAs) that have features similar to desktop apps but are executed within a browser. The document also provides details on using the XMLHttpRequest object to make asynchronous requests to a server and handle the server response.

Related slideshows

An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSONAn introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
An introduction to DOM , JAVASCRIPT , JQUERY, AJAX and JSON
 
Designing REST services with Spring MVC
Designing REST services with Spring MVCDesigning REST services with Spring MVC
Designing REST services with Spring MVC
 
ASP.NET Mvc 4 web api
ASP.NET Mvc 4 web apiASP.NET Mvc 4 web api
ASP.NET Mvc 4 web api
 
1 of 32
Download to read offline
AJAX: an introduction Eleonora Ciceri Ph.D student – Politecnico di Milano eleonora.ciceri@polimi.it
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
… 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
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)
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
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
AJAX vs. RIA: the decision tree HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
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
AJAX vs. RIA: the decision tree ü  Maintainability ü  Reliability ü  Availability ü  Scalability HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
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
AJAX: guarantee industrial strength ¤  It is preferable to limit the amount of code that needs to be run in the shaky JavaScript environment ThinFat
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
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
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)
AJAX Syntax
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
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”);!
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 xmlHttpRequest.open(method, 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
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
GET requests ¤  Standard GET request: ¤  When sending information is required: xmlHttpRequest.open(“GET”, URL, true)! xmlHttpRequest.open(“GET”, “URL?par1=value1”, true);! This is called query string and it is used to contain the data we want to send
POST requests ¤  Standard POST request: ¤  When sending information (like in forms) is required: xmlHttpRequest.open(“POST”, URL, true);! xmlHttpRequest.open(“POST”, URL, true);! xmlHttpRequest.setRequestHeader(“Content-type”, ! ! !“application/x-www-form-urlencoded”);! xmlHttpRequest.send(“par1=value1”);!
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
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
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;!
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;!
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
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
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
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
onreadystatechange with callback functions function myFunction() {! loadXMLDoc(URL, function() {! if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)! document.getElementById(“id”).innerHTML = xmlHttpRequest.responseText;! });! }! !
References
References ¤  http://www.javalobby.org/articles/ajax-ria-overview/ ¤  AJAX explained: http://www.w3schools.com/ajax/ ajax_xmlhttprequest_create.asp

More Related Content

AJAX - An introduction

  • 1. AJAX: an introduction Eleonora Ciceri Ph.D student – Politecnico di Milano eleonora.ciceri@polimi.it
  • 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. … 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. 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. 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. 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. AJAX vs. RIA: the decision tree HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
  • 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. AJAX vs. RIA: the decision tree ü  Maintainability ü  Reliability ü  Availability ü  Scalability HTML JavaScript AJAX Yes No Ubiquity Industrial strength Java Fancy animations Flash
  • 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. 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. 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. 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. 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)
  • 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. 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. 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 xmlHttpRequest.open(method, 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. 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. GET requests ¤  Standard GET request: ¤  When sending information is required: xmlHttpRequest.open(“GET”, URL, true)! xmlHttpRequest.open(“GET”, “URL?par1=value1”, true);! This is called query string and it is used to contain the data we want to send
  • 21. POST requests ¤  Standard POST request: ¤  When sending information (like in forms) is required: xmlHttpRequest.open(“POST”, URL, true);! xmlHttpRequest.open(“POST”, URL, true);! xmlHttpRequest.setRequestHeader(“Content-type”, ! ! !“application/x-www-form-urlencoded”);! xmlHttpRequest.send(“par1=value1”);!
  • 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. 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. 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. 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. 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. 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. 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. 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. onreadystatechange with callback functions function myFunction() {! loadXMLDoc(URL, function() {! if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200)! document.getElementById(“id”).innerHTML = xmlHttpRequest.responseText;! });! }! !
  • 32. References ¤  http://www.javalobby.org/articles/ajax-ria-overview/ ¤  AJAX explained: http://www.w3schools.com/ajax/ ajax_xmlhttprequest_create.asp