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

531 views

Published on

This presentation about AJAX techniques.

Published in: Technology
  • Be the first to comment

Ajax

  1. 2. <ul><li>Introduction </li></ul><ul><li>Traditional Web Application Model </li></ul><ul><li>AJAX Web Application Model </li></ul><ul><li>Is It New ? </li></ul><ul><li>Flash vs. AJAX </li></ul><ul><li>XML Http Objects </li></ul><ul><li>Pros </li></ul><ul><li>Cons </li></ul>
  2. 3. <ul><li>Asynchronous JavaScript And XML </li></ul><ul><li>Ajax is combination of following web technologies </li></ul><ul><ul><li>HTML and CSS </li></ul></ul><ul><ul><li>JavaScript and the DOM </li></ul></ul><ul><ul><li>XML and the XMLHttpRequest object </li></ul></ul><ul><li>Became popular with Google applications </li></ul>
  3. 6. <ul><li>Not Really </li></ul><ul><ul><li>Hidden Frames </li></ul></ul><ul><ul><li>IE5+, Mozilla 1.0+, Safari 1.2+, and Opera 7.6+ </li></ul></ul><ul><li>Some Code </li></ul><ul><li><frameset rows=&quot;100%,0&quot; frameborder=&quot;0&quot;> <frame name=&quot; displayFrame&quot; src=&quot; display.htm&quot; noresize=&quot; noresize&quot; /> <frame name=&quot; hiddenFrame&quot; src=&quot; about:blank&quot; noresize=&quot; noresize&quot; /> </li></ul><ul><li></frameset> </li></ul>
  4. 7. <ul><li><p>Enter customer ID number to retrieve information:</p> </li></ul><ul><li><p>Customer ID: <input type=&quot; text&quot; id=&quot; txtCustomerId&quot; value=&quot;&quot; /></p> </li></ul><ul><li><p><input type=&quot; button&quot; value=&quot; Get Customer Info&quot; onclick=&quot; requestCustomerInfo()&quot; /></p> </li></ul><ul><li><div id=&quot; divCustomerInfo&quot;></div> </li></ul>
  5. 8. <ul><li>function requestCustomerInfo() </li></ul><ul><li>{ </li></ul><ul><li>var sId = document.getElementById(&quot;txtCustomerId&quot;).value; </li></ul><ul><li>top.frames[&quot;hiddenFrame&quot;].location = &quot;getcustomerdata.aspx?id=&quot; + sId; </li></ul><ul><li>} </li></ul>
  6. 9. <ul><li>function displayCustomerInfo(sText) </li></ul><ul><li>{ </li></ul><ul><li>var divCustomerInfo = document.getElementById(&quot;divCustomerInfo&quot;); </li></ul><ul><li>divCustomerInfo.innerHTML = sText; </li></ul><ul><li>} </li></ul>
  7. 10. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Get Customer Data</title> </li></ul><ul><li><% //asp.net code  %> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><div id=&quot; divInfoToReturn&quot;> </li></ul><ul><li><% Response.write(sInfo); ?> </li></ul><ul><li></div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  8. 11. <ul><li>window.onload = function () </li></ul><ul><li>{ </li></ul><ul><li>var divInfoToReturn = document.getElementById(&quot;divInfoToReturn&quot;); top.frames[&quot;displayFrame&quot;].displayCustomerInfo(divInfoToReturn.innerHTML); </li></ul><ul><li>}; </li></ul>
  9. 12. <ul><li>Pros </li></ul><ul><ul><li>Maintains Browser History </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>If the hidden frame page failed to load, there is no notification to the user that a problem has occurred; the main page will continue to wait until the appropriate JavaScript function is called </li></ul></ul>
  10. 13. <ul><li>No plug-in for AJAX </li></ul><ul><li>Flash development tools cost money </li></ul><ul><li>Flash typically has slower page load time </li></ul><ul><li>Flash can work on older browsers </li></ul><ul><li>ActionScript doesn't have a cross browser issues </li></ul><ul><li>Flash can access other domains if there is a crossdomain.xml file </li></ul>
  11. 14. <ul><li>XMLHttpRequest </li></ul><ul><ul><li>A JavaScript Class that lets you make asynchronous HTTP requests from JavaScript </li></ul></ul><ul><ul><li>Make an HTTP request from a JavaScript event </li></ul></ul><ul><ul><li>A call back JavaScript function is invoked at each state of the HTTP request and response </li></ul></ul>
  12. 15. <ul><li>XMLHttpRequest Properties </li></ul><ul><ul><li>onreadystatechange - call back function for state changes </li></ul></ul><ul><ul><li>Ready State - the current state of the HTTP call </li></ul></ul><ul><ul><li>Response Text - the text result of the request </li></ul></ul><ul><ul><li>Response XML - DOM xml object from the request </li></ul></ul><ul><ul><li>Status - HTTP status code of the response </li></ul></ul><ul><ul><li>Status Text - HTTP status text </li></ul></ul>
  13. 16. <ul><li>function createXMLHttp() { </li></ul><ul><li>if (typeof XMLHttpRequest != &quot;undefined&quot;) { </li></ul><ul><li>return new XMLHttpRequest(); </li></ul><ul><li>} else if (window.ActiveXObject) { </li></ul><ul><li>var aVersions = [ &quot;MSXML2.XMLHttp.5.0&quot;, </li></ul><ul><li>&quot;MSXML2.XMLHttp.4.0&quot;,&quot;MSXML2.XMLHttp.3.0&quot;, </li></ul><ul><li>&quot;MSXML2.XMLHttp&quot;,&quot;Microsoft.XMLHttp&quot;]; </li></ul><ul><li>  </li></ul><ul><li>for (var i = 0; i < aVersions.length; i++) { </li></ul><ul><li>try { </li></ul><ul><li>var oXmlHttp = new ActiveXObject(aVersions[i]); </li></ul><ul><li>return oXmlHttp; </li></ul><ul><li>} catch (oError) { </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>throw new Error(&quot;MSXML is not installed.&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  14. 17. <ul><li>function disable() </li></ul><ul><li>{ </li></ul><ul><li>var btnSignUp = document.getElementById(&quot;Button1&quot;); </li></ul><ul><li>btnSignUp.disabled = true; </li></ul><ul><li>} </li></ul>
  15. 18. <ul><li>function validateField(txtField) </li></ul><ul><li>{ </li></ul><ul><li>var url= &quot;working.aspx&quot;; </li></ul><ul><li>url=url+&quot;?username=&quot; </li></ul><ul><li>url=url+ txtField.value; </li></ul><ul><li>var oXmlHttp = createXMLHttp(); </li></ul><ul><li>oXmlHttp.open(&quot;get&quot;, url, true); </li></ul>
  16. 19. <ul><li>oXmlHttp.onreadystatechange = function () { </li></ul><ul><li>if (oXmlHttp.readyState == 4) { </li></ul><ul><li>if (oXmlHttp.status == 200) { </li></ul><ul><li>var arrInfo = oXmlHttp.responseText.split(&quot;||&quot;); </li></ul><ul><li>var Error = document.getElementById(txtField.id + &quot;err&quot;); </li></ul><ul><li>var btnSignUp = document.getElementById(&quot;Button1&quot;); </li></ul><ul><li>  </li></ul><ul><li>if (!eval(arrInfo[0])) { </li></ul><ul><li>Error.innerHTML = &quot;User Alredy Exists&quot;; </li></ul><ul><li>Error.style.display = &quot;block&quot;; </li></ul><ul><li>txtField.valid = false; </li></ul><ul><li>btnSignUp.disabled = true; </li></ul><ul><li>} else { </li></ul><ul><li>Error.style.display = &quot;none&quot;; </li></ul><ul><li> //imgError.style.display = &quot;none&quot;; </li></ul><ul><li>txtField.valid = true; </li></ul><ul><li>btnSignUp.disabled = false; </li></ul><ul><li>} </li></ul>
  17. 20. <ul><li>//document.getElementById(&quot;Button1&quot;).Enable=false; </li></ul><ul><li>} else { </li></ul><ul><li>alert(&quot;An error occurred while trying to contact the server.&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>oXmlHttp.send(null); </li></ul><ul><li>} </li></ul>
  18. 21. <ul><li>Google helped popularize and legitimize by implementing it in GMail </li></ul><ul><li>Increase Usability of Web Applications </li></ul><ul><li>Rich Internet Applications without Flash </li></ul><ul><li>Save Bandwidth </li></ul><ul><li>Download only data you need </li></ul><ul><li>Faster interfaces (sometimes) </li></ul>
  19. 22. <ul><li>Breaks back button support </li></ul><ul><li>URL's not change as state changes </li></ul><ul><li>Cross Browser Issues can be a pain </li></ul><ul><li>JavaScript may tax older machines CPU </li></ul><ul><li>Can't access domains other than the calling domain </li></ul><ul><li>May be disabled (for security reasons) or not available on some browsers </li></ul><ul><li>Debugging is difficult </li></ul>

×