Published on

ajax mukesh rbs college

Published in: Technology, News & Politics
  • 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.
  • Continuous Feel: Traditional web applications force you to submit a form, wait a few seconds, watch the page redraw, and then add some more info. Forgot to enter the area code in a phone number? Start all over again. Sometimes, you feel like you're in the middle of a traffic jam: go 20 metres, stop a minute, go 20 metres, stop a minute ... How many E-Commerce sales have been lost because the user encountered one too many error message and gave up the battle? Ajax offers a smooth ride all the way. There's no page reloads here - you're just doing stuff and the browser is responding. Real-Time Updates: As part of the continous feel, Ajax applications can update the page in real-time. Currently, news services on the web redraw the entire page at intervals, e.g. once every 15 minutes. In contrast, it's feasible for a browser running an Ajax applciation to poll the server every few seconds, so it's capable of updating any information directly on the parts of the page that need changing. The rest of the page is unaffected. Graphical Interaction: Flashy backdrops are abundant on the web, but the basic mode of interaction has nevertheless mimicked the 1970s-style form-based data entry systems. Ajax represents a transition into the world of GUI controls visible on present-day desktops. Thus, you will encounter animations such as fading text to tell you something's just been saved, you will be able to drag items around, you will see some static text suddenly turn into an edit field as you hover over it.
  • 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;);     };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>'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 </li></ul><ul><li>Google Suggest </li></ul><ul><li>GMail </li></ul><ul><li>Flickr </li></ul><ul><li> </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