Ajax

432 views
389 views

Published on

This presentation about AJAX techniques.

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

No Downloads
Views
Total views
432
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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>

×