1 / 19

Ajax

Ajax. What is AJAX?. AJAX stands for A synchronous J avaScript and X ML . AJAX is not a new programming language, but a new way to use existing standards. AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page. What is AJAX?.

perryk
Download Presentation

Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ajax

  2. What is AJAX? • AJAX stands for Asynchronous JavaScript and XML. • AJAX is not a new programming language, but a new way to use existing standards. • AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.

  3. What is AJAX? • AJAX is a technique for creating fast and dynamic web pages. • AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. • This means that it is possible to update parts of a web page, without reloading the whole page. • Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. • Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

  4. What is AJAX? • AJAX is based on internet standards, and uses a combination of: • XMLHttpRequest object (to exchange data asynchronously with a server) • JavaScript/DOM (to display/interact with the information) • CSS (to style the data) • XML (often used as the format for transferring data)

  5. AJAX Working By Diagram?

  6. Where to put AJAX Code? • For simplicity we will use JavaScript and Basic HTML for Client side and JSP for server side script. <html> <head> <script type=”text/javascript”> function updateDynamically() { …… // AJAX SCRIPT GOES HERE …… } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick=“updateDynamically()">Change Content</button> </body> </html>

  7. How AJAX works? • AJAX - Create an XMLHttpRequest Object. • All modern browsers support the XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject) means it has built in XMLHttpRequest object. • The XMLHttpRequest object is used to exchange data with a server behind the scenes. • This means that it is possible to update parts of a web page, without reloading the whole page. • Syntax for creating an XMLHttpRequest object: // For New Versions of Browser xmlhttp=new XMLHttpRequest(); or // for older versions xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  8. How AJAX works? • To handle versions problem generally we write. if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome etc. { xmlhttp=new XMLHttpRequest();}else // code for IE6, IE5 { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

  9. Send Request to Server. • The XMLHttpRequest object is used to exchange data with a server. • To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object: xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send();

  10. Send Request to Server.

  11. Send Request to Server.

  12. Asynchronous - True or False? • AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to behave as AJAX, the async parameter of the open() method has to be set to true: xmlhttp.open("GET","ajax_test.jsp",true); • When using async=true, specify a function to execute when the response is ready in the onreadystatechange event: xmlhttp.onreadystatechange=function() {   if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    } } xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

  13. Server Response • To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object.

  14. Server Response • The responseText Property • If the response from the server is not XML, use the responseText property. • The responseText property returns the response as a string, and you can use it accordingly. • The responseXML Property • If the response from the server is XML, and you want to parse it as an XML object, use the responseXML property

  15. The onreadystatechange event • When a request to a server is sent, we want to perform some actions based on the response. • The onreadystatechange event is triggered every time the readyState changes. • The readyState property holds the status of the XMLHttpRequest.

  16. The onreadystatechange event • Three important properties of the XMLHttpRequest object are as follows,

  17. The onreadystatechange event • In the onreadystatechange event, we specify what will happen when the server response is ready to be processed. • When readyState is 4 and status is 200, the response is ready: xmlhttp.onreadystatechange=function() {  if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById("myDiv").innerHTML=xmlhttp.responseText;  }  }

  18. Using a Callback Function • A callback function is a function passed as a parameter to another function. • If you have more than one AJAX task on your website, you should create ONE standard function for creating the XMLHttpRequest object, and call this for each AJAX task. • The function call should contain the URL and what to do on onreadystatechange.

  19. Using a Callback Function function myFunction() {loadXMLDoc("ajax_info.txt",function() {if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  });}

More Related