mukesh

1,071 views

Published on

ajax mukesh rbs college

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

mukesh

  1. 1. AJAX – Asynchronous JavaScript and XML Vijay Khambalkar Magnet Technologies Pvt. Ltd.
  2. 2. What is AJAX ? Ajax is just a style of design, one that makes feel less web and more desktop
  3. 3. Why AJAX ? <ul><li>Reduce Network Traffic </li></ul><ul><li>Increase Speed </li></ul><ul><li>Enhance User Experience </li></ul>
  4. 4. AJAX Characteristics : <ul><li>Continuous Feel </li></ul><ul><li>Real Time Updates </li></ul><ul><li>Graphical Interactions </li></ul>
  5. 5. Ajax Lifecycle
  6. 6. How to use AJAX practically ? <ul><li>Use iFrame </li></ul><ul><li>Go the “XmlHttpRequest” way ! </li></ul>
  7. 7. XmlHttpRequest ? <ul><li>Client Side Component. </li></ul><ul><li>Must be instantiated before use. </li></ul><ul><li>Use open() method to connect and retrieve response from the specified URL. </li></ul><ul><li>Handle onreadystatechange Event. </li></ul>
  8. 8. XmlHttpRequest Component <ul><li>Internet Explorer 5 </li></ul><ul><li>Mozilla 1.0 – Netscape 7 </li></ul><ul><li>Safari 1.2 </li></ul><ul><li>Opera 7.6 </li></ul><ul><li>Firefox </li></ul>
  9. 9. Let’s see some coding : var req; function retrieveURL(url) {     if (window.XMLHttpRequest) // Non-IE browsers {       req = new XMLHttpRequest();     } else if (window.ActiveXObject) // IE {       req = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);     }      req.open(&quot;GET&quot;, url, true);      req.onreadystatechange = processStateChange;      req.send(null);   }
  10. 10. Let’s see some coding : function processStateChange() {     if (req.readyState == 4) // Complete {       if (req.status == 200) // OK response {         document.getElementById(“MyContent&quot;).innerHTML = req.responseText;       }     }   }  
  11. 11. Who created AJAX ? <ul><li>No one created AJAX ! </li></ul><ul><li>AJAX = A synchronous J avaScript A nd X ML </li></ul><ul><li>Jesse James Garett coined term AJAX in his article - “AJAX : A new approach for a new application” </li></ul>
  12. 12. AJAX with PHP
  13. 13. Coding : PHP [server.php] <ul><li><?php </li></ul><ul><li>//Display Message </li></ul><ul><ul><li>echo “This is Ajax with PHP “; </li></ul></ul><ul><li>?> </li></ul>
  14. 14. Coding: Javascript [client.htm] <ul><li><html> </li></ul><ul><li><script language=“javascript”> </li></ul><ul><li>function createRequestObject() </li></ul><ul><li>{ </li></ul><ul><ul><li>var httpObj; </li></ul></ul><ul><ul><li>var browser=navigator.appName; </li></ul></ul><ul><ul><li>if(browser==&quot;Microsoft Internet Explorer&quot;){ </li></ul></ul><ul><ul><li> httpObj = ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul></ul><ul><ul><li>}else{ </li></ul></ul><ul><ul><li>httpObj = new XMLHttpRequest(); </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>return http; </li></ul></ul><ul><li>} </li></ul><ul><li>var http = createRequestObject(); - Continued </li></ul>
  15. 15. Coding: Javascript [client.htm] <ul><li>var requestObject=createRequestObject(); </li></ul><ul><li>function sendRequest(page) </li></ul><ul><li>{ </li></ul><ul><li>requestObject.open('get',page); </li></ul><ul><li>requestObject.onreadystatechange=displayContent; </li></ul><ul><li>requestObject.send(null); </li></ul><ul><li>} </li></ul><ul><li>- Continued </li></ul>
  16. 16. Coding: Javascript [client.htm] <ul><li>function displayContent() </li></ul><ul><li>{ </li></ul><ul><li>if(requestObject.readyState==4){ </li></ul><ul><li>var data=requestObject.responseText; </li></ul><ul><li>document.getElementById('contact').innerHTML=data+&quot;<br>&quot;; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul><ul><li><body> </li></ul><ul><li><a href=&quot;javascript:sendRequest('server.php')&quot;>Click here to View the page</a><br> </li></ul><ul><li><div id=“contact&quot;> </div> </li></ul><ul><li></body></html> </li></ul>
  17. 17. AJAX Libraries in PHP <ul><li>SAJAX </li></ul><ul><li>XAJAX </li></ul><ul><li>AJAXAC </li></ul><ul><li>JPSPAN </li></ul>
  18. 18. Lets Try Out Example
  19. 19. When to go the AJAX way ? “ Not Always !!! Abuse of any technology would make it a liability !!! ”
  20. 20. Where has AJAX been used ? <ul><li>Google Maps http://maps.google.com </li></ul><ul><li>Google Suggest http://www.google.com/webhp?complete=1&hl=en </li></ul><ul><li>GMail </li></ul><ul><li>Flickr </li></ul><ul><li>A9.com </li></ul>
  21. 21. Limitations of AJAX <ul><li>JavaScript Implementations. </li></ul><ul><li>Debugging. </li></ul><ul><li>Security. </li></ul>
  22. 22. Summary
  23. 23. Thank You

×