Understanding AJAX

817 views
741 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
817
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Effective Java
  • Understanding AJAX

    1. 1. Understanding AJAX by Sanjeev Kumar
    2. 2. Introduction Overview Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call Processing Received Data References <ul><li>Introduction </li></ul><ul><ul><li>AJAX or Asynchronous Javascript and XML </li></ul></ul><ul><ul><li>Helps in creating interactive applications </li></ul></ul><ul><ul><li>Technique of making server requests from browser without completely replacing the current page </li></ul></ul><ul><ul><li>Ajax is not a technology but a technique that </li></ul></ul><ul><ul><ul><li>fetches data from the server and </li></ul></ul></ul><ul><ul><ul><li>uses that data to update the current webpage rather than reloading the complete page </li></ul></ul></ul>
    3. 3. Introduction Overview Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call Processing Received Data References <ul><li>Overview </li></ul><ul><ul><li>Identify elements of the webpage that need to be changed dynamically by assigning a unique ID (String Identifier) </li></ul></ul><ul><ul><li>Write Javascript method to handle events like mouse click on certain elements on the page </li></ul></ul><ul><ul><li>In this javascript method write code to make server call using XMLHttpRequest object </li></ul></ul><ul><ul><li>On server write servlet to handle such request and return data (usually in XML format) </li></ul></ul><ul><ul><li>Back on client side, process the received data and update the web page element to reflect the same </li></ul></ul>
    4. 4. Introduction Overview Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call Processing Received Data References <ul><li>Identify Page Elements </li></ul><ul><ul><li>Assign ID (string identifier) to every element on the webpage that will potentially change </li></ul></ul><ul><ul><li>Typical candidates for change are <div>, <p> or <span> elements. </li></ul></ul><ul><ul><li>Here is an example showing how an ID is assigned to a div element </li></ul></ul><ul><ul><ul><li>“ <div id=“divtochange&quot;>This div may change later!</div>” </li></ul></ul></ul>
    5. 5. Overview Processing Received Data References <ul><li>Manipulate Page Elements </li></ul><ul><ul><li>Once elements that can potentially change are assigned the ID (string identifier), it is fairly straight forward to change the html associated with the element without reloading the entire page. </li></ul></ul><ul><ul><li>Here is the code that will do just that; Manipulate content of the element with id “divtochange”. </li></ul></ul><ul><ul><ul><li>var element = Document.getElementById(&quot;divtochange&quot;); </li></ul></ul></ul><ul><ul><ul><li>element.innerHTML = “Updated content !&quot;; </li></ul></ul></ul>Introduction Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call
    6. 6. Introduction Overview Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call Processing Received Data References <ul><ul><li>Event Handler Function </li></ul></ul><ul><ul><li>Define event handler method in Javascript section of the page </li></ul></ul><ul><ul><li>Here is an example: </li></ul></ul><ul><ul><ul><li><script language=&quot;JavaScript&quot;> </li></ul></ul></ul><ul><ul><ul><li>function showDetailsClicked(event) { </li></ul></ul></ul><ul><ul><ul><li>//@todo : make a call to the server </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li></script> </li></ul></ul></ul><ul><ul><li>Now attach event handler method to elements that trigger Ajax calls </li></ul></ul><ul><ul><ul><li>“ <img src=“showDetails.png&quot; alt=&quot;Search&quot; onClick=“ showDetailsClicked (event);&quot;>” </li></ul></ul></ul>
    7. 7. Introduction Overview Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call Processing Received Data References <ul><ul><li>Making Server Calls </li></ul></ul><ul><ul><li>Create XMLHttpRequest Object </li></ul></ul><ul><ul><li>var xhr; </li></ul></ul><ul><ul><li>function createRequestObj() { </li></ul></ul><ul><ul><ul><li>if (window.ActiveXObject) { // if Internet Explorer </li></ul></ul></ul><ul><ul><ul><ul><li>xhr = new ActiveXObject(&quot;Microsoft.XMLHttp&quot;); </li></ul></ul></ul></ul><ul><ul><ul><li>} else { // for any other browser </li></ul></ul></ul><ul><ul><ul><ul><li>xhr = new XMLHttpRequest(); </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>Making server call </li></ul></ul><ul><ul><li>function showDetailsClicked (event) { </li></ul></ul><ul><ul><ul><li>xhr.open(&quot;POST&quot;, &quot;/ajaxfunction&quot;); </li></ul></ul></ul><ul><ul><ul><li>xhr. onreadystatechang e = processData; //Asynchronous call </li></ul></ul></ul><ul><ul><ul><li>xhr.send(data); </li></ul></ul></ul><ul><ul><li>} </li></ul></ul>
    8. 8. Introduction Overview Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call Processing Received Data Thank You <ul><ul><li>Processing Received Data </li></ul></ul><ul><ul><li>Processing the data received from server. The callback handler function that we assigned to our XHR will get called several times as the response comes in. Typically, we only want to parse the response once it has fully arrived, i.e. the readyState is complete. </li></ul></ul><ul><ul><li>function processData() { </li></ul></ul><ul><ul><ul><li>if (xhr.readyState == 4) { //4 means request completed </li></ul></ul></ul><ul><ul><ul><ul><li>var responseXML = xhr.responseXML; </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// process the response received from </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// server and manipulate elements on </li></ul></ul></ul></ul><ul><ul><ul><ul><li>// the page as described earlier </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><li>} </li></ul></ul>
    9. 9. Introduction Overview Identify Page Elements Manipulate Page Elements Event Handler Function Making Server Call Processing Received Data Thank You <ul><ul><li>Thank You </li></ul></ul>

    ×