Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • AJAX – has taken IT industry by storm. It might turn out to be one of the most demanded thing/in thing and hence, a brief presentation to understand AJAX. Be it anything that we are learning, asking 6 key questions is very important to get an overall idea of the same. The questions being – What, Why, Who, How, When and Where. So let’s being with what is AJAX? – not a technology, not a product … but an approach taken to develop Web Applications.
  • Inorder to understand what is this approach all about … let us first seek to know what the current approach is … At present, for every user interaction, the entire web page is rebuild. Even if a part of the entire page needs to be changed … we land up reloading the entire page. Which leads to … network traffic … slow speed … and most importantly … user experience goes down … user has to wait for loading of images … controls … which had already been loaded once!!! This is what AJAX asks us not to do.
  • Ajax

    1. 1. AJAX – Asynchronous JavaScript and XML
    2. 2. What is AJAX ? Ajax is a set of client side technologies that provides asynchronous communication between user interfaces and web server. So the advantages of using Ajax are asynchronous communication, minimal data transfer and server is not overloaded with unnecessary load.
    3. 3. What problem does Ajax solve? <ul><li>Unnecessary data transfers </li></ul><ul><li>Synchronous processing </li></ul><ul><li>Unnecessary processing by server </li></ul>
    4. 4. Unnecessary data is transferred between client and server. For instance, the whole page is posted and refreshed even when we want small data of the page to be refreshed. <ul><li>Unnecessary data transfers </li></ul>
    5. 5. When a user requests for a page he has to wait until the complete round trip happens. In short, the request / response work on a synchronous model rather than asynchronous which makes user experience very difficult. How many times it has happened that you are requesting a page and you see the below screen…frustrating right. <ul><li>Synchronous processing </li></ul>
    6. 6. Because we are posting unnecessary information to the server, the server is overloaded with unnecessary processing. <ul><li>Unnecessary processing by server </li></ul>
    7. 7. Ajax Lifecycle
    8. 8. 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>
    9. 9. 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>
    10. 10. Let’s see some coding : <html> <head> <script language = &quot;javascript&quot;> function GetXmlHttpObject() { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject) { // code for IE6, IE5 return new ActiveXObject (&quot;Microsoft.XMLHTTP&quot;); } return null; }
    11. 11. Let’s see some coding : var xmlhttp; function showUser(str) { xmlhttp= GetXmlHttpObject(); if (xmlhttp==null) { alert (&quot;Browser does not support HTTP Request&quot;); return; } var url=&quot;getselected.php&quot;; url= url+&quot;?id=&quot;+str; xmlhttp.onreadystatechange= stateChanged; xmlhttp.open (&quot;GET“ ,url,true); xmlhttp.send(null); } 
    12. 12. Coding : PHP [getselected.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>
    13. 13. Coding: Javascript <ul><li>function stateChanged() </li></ul><ul><li>{ </li></ul><ul><li>if (xmlhttp.readyState==4) </li></ul><ul><li>{ </li></ul><ul><li>document.getElementById(&quot;txtHint&quot;).innerHTML= xmlhttp.responseText; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>- Continued </li></ul>
    14. 14. Coding: Javascript <ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><form> </li></ul><ul><li>Select a User: </li></ul><ul><li><select name=&quot;users&quot; onChange=&quot;showUser(this.value)&quot;> </li></ul><ul><li><option value=&quot;1&quot;>Peter Griffin</option> </li></ul><ul><li><option value=&quot;2&quot;>Lois Griffin</option> </li></ul><ul><li><option value=&quot;3&quot;>Glenn Quagmire</option> </li></ul><ul><li></select> </li></ul><ul><li></form> </li></ul><ul><li><br /> </li></ul><ul><li><div id=&quot;txtHint&quot;><b>Person information will be listed here.</b></div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
    15. 15. Limitations of AJAX <ul><li>JavaScript Implementations. </li></ul><ul><li>Debugging. </li></ul><ul><li>Security. </li></ul>
    16. 16. One of the well known tools in building an efficient Ajax based application is jQuery. This programming language is often used in developing plug-ins for JavaScript and Ajax based applications. <ul><li>JQuery </li></ul>
    17. 17. <html> <head> <script src=&quot;jquery.js&quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> $(function() { $('#container-1').tabs(); }); </script> </head> <body> <h2>Simple Tabs</h2> <div id=&quot;container-1&quot;> <ul> <li><a href=&quot;#fragment-1&quot;><span>Tab1</span></a></li> <li><a href=&quot;#fragment-2&quot;><span>Tab2</span></a></li> <li><a href=&quot;#fragment-3&quot;><span>Tab3</span></a></li> </ul> -continued <ul><li>Let’s see some coding using jquery </li></ul>
    18. 18. <ul> <li><a href=&quot;#fragment-1&quot;><span>Tab1</span></a></li> <li><a href=&quot;#fragment-2&quot;><span>Tab2</span></a></li> <li><a href=&quot;#fragment-3&quot;><span>Tab3</span></a></li> </ul> <div id=&quot;fragment-1&quot;> <p>First tab is active by default:</p> <pre><code>$('#container').tabs();</code></pre> </div> <div id=&quot;fragment-2&quot;> Some text goes here for tab2 </div> <div id=&quot;fragment-3&quot;> some more text for tab3</div> </div> </body> </html> <ul><li>Let’s see some coding using jquery </li></ul>
    19. 19. Thank You