AJAX

1,324 views
1,232 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
1,324
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AJAX

  1. 1. AJAX By D.Ravi Teja 08Q61A0551
  2. 2. What is AJAX ? <ul><li>Asynchronous Javascript and XML. </li></ul><ul><li>Not a stand-alone language or technology. </li></ul><ul><li>It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages. </li></ul><ul><li>It is a client side technology. </li></ul>
  3. 3. Purpose of AJAX <ul><li>Prevents unnecessary reloading of a page. </li></ul><ul><li>When we submit a form, although most of the page remains the same, whole page is reloaded from the server. </li></ul><ul><li>This causes very long waiting times and waste of bandwidth. </li></ul><ul><li>AJAX aims at loading only the necessary innformation, and making only the necessary changes on the current page without reloading the whole page. </li></ul>
  4. 4. Technologies Used <ul><li>AJAX uses: </li></ul><ul><ul><li>Javascript (for altering the page) </li></ul></ul><ul><ul><li>XML (for information exchange) </li></ul></ul><ul><ul><li>ASP or PHP (server side) </li></ul></ul>
  5. 5. Example <ul><li>Facebook Wall </li></ul><ul><li>Facebook Ticker </li></ul><ul><li>Face book chat </li></ul><ul><li>Google Maps </li></ul><ul><li>Flicker </li></ul>
  6. 6. Data Exchange in AJAX <ul><li>In AJAX : </li></ul>
  7. 7. History of AJAX <ul><li>Starts with web pages </li></ul><ul><li>Static web pages </li></ul><ul><ul><li>Static html page is loaded </li></ul></ul><ul><ul><li>No interaction with user </li></ul></ul><ul><li>Dynamic web pages </li></ul><ul><ul><li>Html page is generated dynamically </li></ul></ul><ul><ul><li>Interaction with user </li></ul></ul><ul><ul><li>Becomes slower as functionality increases </li></ul></ul><ul><ul><li>Speed becomes untolerable, so AJAX has been born </li></ul></ul>
  8. 8. Alternative Technologies <ul><li>Macromedia Flash </li></ul><ul><ul><li>Requires a plug-in </li></ul></ul><ul><li>Java Web Start/Applets </li></ul><ul><li>.NET – No Touch Deployment </li></ul><ul><li>Only necessary data is returned and that part is updated </li></ul>
  9. 9. Structure of System <ul><li>Client/Server architecture </li></ul><ul><li>XMLHTTP object is used to make request and get response in Client side </li></ul><ul><li>Request can be done via “GET” or “POST” methods </li></ul><ul><ul><li>“ GET”: parameters are attached to the url used to connect. </li></ul></ul><ul><ul><li>“ POST”: parameters are sent as parameters to a function </li></ul></ul><ul><li>Not many changes in Server side </li></ul><ul><ul><li>Response is a combination of xml tags </li></ul></ul>
  10. 10. XMLHTTP Object <ul><li>The object that is used to connect to the remote server is called XMLHTTP . </li></ul><ul><li>It resembles the Java’s URL object that is used to access a specific URL and get the contents. </li></ul>
  11. 11. Creating the object <ul><li>For IE 5.5: </li></ul><ul><li>objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”) </li></ul><ul><li>For Mozilla: </li></ul><ul><li>objXmlHttp=new XMLHttpRequest() </li></ul>
  12. 12. Sending information <ul><li>After creating the object, we can send information to the web server and get the answer using this object’s functions: </li></ul><ul><li>GET METHOD: xmlhttp.open(“GET”, url, true) </li></ul><ul><li> xmlhttp.send() </li></ul><ul><li>POST METHOD: xmlhttp.open(&quot;POST&quot;, url, true) </li></ul><ul><li>xmlhttp.send(“date=11-11-2006&name=Ali&quot;) </li></ul><ul><li>Third argument tells that data will be processes asynchronously. When server responds, the “OnReadyStateChange” event handler will be called. </li></ul>
  13. 13. Retrieving information <ul><li>We get the returned value with the property “ xmlHttp.responseText ”. </li></ul>
  14. 14. Pros <ul><ul><li>Independent of server technology. </li></ul></ul><ul><ul><li>Apart from obtaining the XMLHTTP object, all processing is same for all browser types, because Javascript is used. </li></ul></ul><ul><ul><li>Permits the development of faster and more interactive web applications. </li></ul></ul>
  15. 15. Cons <ul><ul><li>The back button problem. People think that when they press back button, they will return to the last change they made, but in AJAX this doesn not hold. </li></ul></ul><ul><ul><li>Possible network latency problems. People should be given feedback about the processing. </li></ul></ul><ul><ul><li>Does not run on all browsers. </li></ul></ul>
  16. 16. <ul><li>Thank you </li></ul>

×