AJAX

1,606 views

Published on

Introduction to Asynchronous JavaScript and XML

Published in: Technology

AJAX

  1. 1. INTRODUCTION TO AJAX By: Ankur Gupta B.E. Final Yr. (I.T.) JECRC, Jodhpur
  2. 2. Introduction <ul><li>Stands for “Asynchronous JavaScript and XML “ </li></ul><ul><li>Development technique for creating interactive web applications </li></ul><ul><li>Not a new Technology but more of a Pattern </li></ul>
  3. 3. Motivation NEEDs <ul><li>WebPages can be UPDATED without RELOADING. </li></ul><ul><li>Single piece of data can be loaded without reloading of entire webpage </li></ul><ul><li>Multiple HTTP request/response can be processed. </li></ul>
  4. 4. Roots of AJAX <ul><li>Originally developed by Microsoft as XMLHttp for IE 5.0. </li></ul><ul><li>Mozilla 1.0 had the first native implementation of XMLHttpRequest in 2002. </li></ul><ul><li>Soon followed by Safari, Opera and others. </li></ul>
  5. 5. Roots of AJAX contd.. <ul><li>This technique was named AJAX in 2005 by James Garret. </li></ul><ul><li>W3C standardized XMLHTTPRequest object API in 2006. </li></ul>
  6. 6. Role of AJAX in Web 2.0 <ul><li>Core features of Web 2.0 </li></ul><ul><ul><li>Web as a Platform </li></ul></ul><ul><ul><li>Collective Intelligence </li></ul></ul><ul><ul><li>Above the level of Single Device </li></ul></ul><ul><ul><li>Services , not packaged software </li></ul></ul><ul><ul><li>Rich User experiences </li></ul></ul><ul><li>AJAX </li></ul><ul><ul><li>Assists in User Interfaces </li></ul></ul><ul><ul><li>Less machine readable / linkable webpages </li></ul></ul>
  7. 7. Uses of AJAX Paradigm <ul><li>Real-Time Form Data Validation </li></ul><ul><ul><li>Form data that require server-side validation can be validated in a form “before” the user submits it. </li></ul></ul><ul><li>Auto completion </li></ul><ul><ul><li>A specific portion of form data may be auto-completed as the user types. </li></ul></ul>
  8. 8. Uses of AJAX Paradigm contd.. <ul><li>On Demand Loading </li></ul><ul><ul><li>Based on a client event, an HTML page can fetch more detailed information on data without refreshing the page. </li></ul></ul><ul><li>Refreshing data and server push: </li></ul><ul><ul><li>HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data. </li></ul></ul><ul><ul><li>Sophisticated UI Controls </li></ul></ul><ul><ul><li>Controls such as tree controls, menus, and progress bars may be provided without page refreshes. </li></ul></ul>
  9. 9. Components <ul><ul><li>HTML (or XHTML) and CSS </li></ul></ul><ul><ul><ul><li>Presenting information </li></ul></ul></ul><ul><ul><li>Document Object Model </li></ul></ul><ul><ul><ul><li>Dynamic display and interaction with the information </li></ul></ul></ul><ul><ul><li>XMLHttpRequest object </li></ul></ul><ul><ul><ul><li>Retrieving data ASYNCHRONOUSLY from the web server . </li></ul></ul></ul><ul><ul><li>Javascript </li></ul></ul><ul><ul><ul><li>Binding everything together </li></ul></ul></ul>
  10. 10. Web Application and AJAX
  11. 11. Request Processing
  12. 12. AJAX Architecture <ul><li>Create an XMLHttpRequest object </li></ul><ul><li>Make a HTTP request to the server </li></ul><ul><li>Register your callback function for </li></ul><ul><li>handling the response </li></ul><ul><li>Handle the response, check for return </li></ul><ul><li>status </li></ul><ul><li>Parse the response on success, display </li></ul><ul><li>result </li></ul>
  13. 13. Example using XMLHttpRequest – Step 1 <ul><li>Create Object </li></ul><ul><ul><li>Objects are Browser Specific. </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>var requester = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); (for IE 5 & IE 6 browsers) </li></ul></ul><ul><ul><li>var requester = new XMLHttpRequest(); </li></ul></ul><ul><ul><li>(for firefox, mozilla & others) </li></ul></ul>
  14. 14. Using XMLHttpRequest – Step 2 <ul><li>Transferring data to Server </li></ul><ul><ul><li>Open() to initialize connection to Server </li></ul></ul><ul><ul><li>Send() to send the actual Data </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>requester.open(&quot;POST&quot;, &quot;/query.cgi“,true) </li></ul></ul><ul><ul><li>requester.send(&quot;name=Bob&email=bob@example.com&quot;); </li></ul></ul>METHOD PATH CONNECTION TYPE
  15. 15. What happens after sending data ? <ul><li>XMLHttpRequest contacts the server and retrieves the data </li></ul><ul><ul><li>Can take indeterminate amount of time </li></ul></ul><ul><li>Event Listener to determine when the object has finished retrieving data </li></ul><ul><ul><li>Specifically listen for changes in “readyState” variable </li></ul></ul>
  16. 16. Using XMLHttpRequest – Step 3 <ul><li>Set up a function to handle the event when the readyState is changed to 4 </li></ul><ul><ul><li>0 – Uninitialised </li></ul></ul><ul><ul><li>1 – open </li></ul></ul><ul><ul><li>2 – sent </li></ul></ul><ul><ul><li>3 – receiving </li></ul></ul><ul><ul><li>4 – Completed </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>requester.onreadystatechange = stateHandler; </li></ul></ul>
  17. 17. Using XMLHttpRequest – Step 3 Contd <ul><li>Check whether the XMLHttpRequest object successfully retrieved the data, or give an error code </li></ul><ul><li>Example </li></ul><ul><ul><li>if (requester.readyState == 4)  {   if (requester.status == 200)   {    success(); } </li></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
  18. 18. Using XMLHttpRequest – Step 4 <ul><li>Parse and display data </li></ul><ul><ul><li>responseXML </li></ul></ul><ul><ul><li>responseText </li></ul></ul><ul><li>Example </li></ul><ul><ul><li>var nameNode = requester.responseXML.getElementsByTagName(&quot;name&quot;)[0]; </li></ul></ul><ul><ul><li>var nameTextNode = nameNode.childNodes[0]; </li></ul></ul><ul><ul><li>var name = nameTextNode.nodeValue; </li></ul></ul>
  19. 19. SAMPLE CODE <ul><li>var xhr = new XMLHttpRequest(); </li></ul><ul><li>xhr.onreadystatechange = function () { </li></ul><ul><li>if (xhr.readyState == 4) { </li></ul><ul><li>if (xhr.status == 200) { </li></ul><ul><li>// success, process data </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>xhr.open(“GET”, “http://www.foo.com/bar”, true); </li></ul><ul><li>xhr.send(null); </li></ul>
  20. 20. Advantages <ul><li>Rich User Interface </li></ul><ul><li>Highly Responsive </li></ul><ul><li>Lower Bandwidth Usage </li></ul><ul><li>Separation of content, formatting, and behavior </li></ul>
  21. 21. Problems <ul><li>Breaking the “back” button </li></ul><ul><ul><li>Browsers record static page visits </li></ul></ul><ul><ul><li>Can’t see previous content of same page. </li></ul></ul><ul><ul><li>Invisible IFrames can invoke changes that populate the history </li></ul></ul><ul><li>Book marking a particular “State” becomes difficult </li></ul><ul><ul><li>JavaScript generates the page NOT found server error </li></ul></ul>
  22. 22. Problems Contd.. <ul><li>Increase in the code size on browser </li></ul><ul><ul><li>Response time affected </li></ul></ul><ul><li>Difficult to debug </li></ul><ul><ul><li>Processing logic both in client and server </li></ul></ul><ul><li>Viewable Source </li></ul><ul><ul><li>Open to hackers or plagiarism </li></ul></ul><ul><li>Server Load </li></ul><ul><ul><li>Asynchronous request is a “heavy” operation </li></ul></ul>
  23. 23. Ajax Libraries and Frameworks <ul><li>dojo Toolkit </li></ul><ul><li>Google Web Toolkit </li></ul><ul><li>Microsoft Atlas </li></ul><ul><li>Prototype </li></ul><ul><li>Script.aculo.us </li></ul><ul><li>YUI </li></ul><ul><li>and a lot more ... </li></ul>
  24. 24. Who is using AJAX ?
  25. 25. Reading Material <ul><li>Overview </li></ul><ul><ul><li>http://en.wikipedia.org/wiki/AJAX </li></ul></ul><ul><ul><li>http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html?cid=59754 </li></ul></ul><ul><li>Original Article from Adaptive path </li></ul><ul><ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>http://www.sitepoint.com/article/remote-scripting-ajax.html </li></ul></ul><ul><ul><li>http://www.mousewhisperer.co.uk/ajax_page.html </li></ul></ul><ul><ul><li>http://www.clearnova.com/ajax/ </li></ul></ul><ul><ul><li>http://www.webpasties.com/xmlHttpRequest/ </li></ul></ul><ul><li>AJAX based Applications </li></ul><ul><ul><li>http://www.ajaxreview.com/ </li></ul></ul><ul><ul><li>http://ajaxblog.com/ </li></ul></ul><ul><li>Issues/Problems </li></ul><ul><ul><li>http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html </li></ul></ul>
  26. 26. Thank You <ul><li>Questions ? </li></ul>

×