AJAX is a technique for creating faster and more interactive web applications by exchanging small amounts of data with the server asynchronously in the background without interfering with the display and behavior of the existing page. It allows for updating parts of a web page rather than reloading the entire page by making use of a combination of technologies including JavaScript, XML, and HTML and HTTP requests. Some common applications that use AJAX include Google Maps, Facebook Chat, and Flickr.

1. AJAX By D.Ravi Teja 08Q61A0551

2. What is AJAX ? Asynchronous Javascript and XML. Not a stand-alone language or technology. It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages. It is a client side technology.

3. Purpose of AJAX Prevents unnecessary reloading of a page. When we submit a form, although most of the page remains the same, whole page is reloaded from the server. This causes very long waiting times and waste of bandwidth. AJAX aims at loading only the necessary innformation, and making only the necessary changes on the current page without reloading the whole page.

4. Technologies Used AJAX uses: Javascript (for altering the page) XML (for information exchange) ASP or PHP (server side)

5. Example Facebook Wall Facebook Ticker Face book chat Google Maps Flicker

6. Data Exchange in AJAX In AJAX :

7. History of AJAX Starts with web pages Static web pages Static html page is loaded No interaction with user Dynamic web pages Html page is generated dynamically Interaction with user Becomes slower as functionality increases Speed becomes untolerable, so AJAX has been born

8. Alternative Technologies Macromedia Flash Requires a plug-in Java Web Start/Applets .NET – No Touch Deployment Only necessary data is returned and that part is updated

9. Structure of System Client/Server architecture XMLHTTP object is used to make request and get response in Client side Request can be done via “GET” or “POST” methods “ GET”: parameters are attached to the url used to connect. “ POST”: parameters are sent as parameters to a function Not many changes in Server side Response is a combination of xml tags

10. XMLHTTP Object The object that is used to connect to the remote server is called XMLHTTP . It resembles the Java’s URL object that is used to access a specific URL and get the contents.

11. Creating the object For IE 5.5: objXmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”) For Mozilla: objXmlHttp=new XMLHttpRequest()

12. Sending information After creating the object, we can send information to the web server and get the answer using this object’s functions: GET METHOD: xmlhttp.open(“GET”, url, true) xmlhttp.send() POST METHOD: xmlhttp.open("POST", url, true) xmlhttp.send(“date=11-11-2006&name=Ali") Third argument tells that data will be processes asynchronously. When server responds, the “OnReadyStateChange” event handler will be called.

13. Retrieving information We get the returned value with the property “ xmlHttp.responseText ”.

14. Pros Independent of server technology. Apart from obtaining the XMLHTTP object, all processing is same for all browser types, because Javascript is used. Permits the development of faster and more interactive web applications.

15. Cons 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. Possible network latency problems. People should be given feedback about the processing. Does not run on all browsers.

16. Thank you