Your SlideShare is downloading. ×
0
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
AJAX
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AJAX

1,127

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,127
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. AJAX By D.Ravi Teja 08Q61A0551
  • 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. 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. 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. 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. Data Exchange in AJAX <ul><li>In AJAX : </li></ul>
  • 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. 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. 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. 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. 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. 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(&amp;quot;POST&amp;quot;, url, true) </li></ul><ul><li>xmlhttp.send(“date=11-11-2006&amp;name=Ali&amp;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. Retrieving information <ul><li>We get the returned value with the property “ xmlHttp.responseText ”. </li></ul>
  • 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. 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. <ul><li>Thank you </li></ul>

×