AJAX (Asynchronous JavaScript and XML) is a development technique for building interactive web applications. It allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes, without interfering with the display and behavior of the existing page. Some key uses of AJAX include real-time form validation, auto-completion of form fields, loading additional data without page refreshes, and implementing rich user interfaces with progress indicators and other controls. The core components that enable AJAX include HTML/XHTML for content display, CSS for presentation, DOM for dynamic display of information, XMLHttpRequest object for asynchronous data retrieval from the server, and JavaScript to bind everything together.

1. INTRODUCTION TO AJAX By: Ankur Gupta B.E. Final Yr. (I.T.) JECRC, Jodhpur

2. Introduction Stands for “Asynchronous JavaScript and XML “ Development technique for creating interactive web applications Not a new Technology but more of a Pattern

3. Motivation NEEDs WebPages can be UPDATED without RELOADING. Single piece of data can be loaded without reloading of entire webpage Multiple HTTP request/response can be processed.

4. Roots of AJAX Originally developed by Microsoft as XMLHttp for IE 5.0. Mozilla 1.0 had the first native implementation of XMLHttpRequest in 2002. Soon followed by Safari, Opera and others.

5. Roots of AJAX contd.. This technique was named AJAX in 2005 by James Garret. W3C standardized XMLHTTPRequest object API in 2006.

6. Role of AJAX in Web 2.0 Core features of Web 2.0 Web as a Platform Collective Intelligence Above the level of Single Device Services , not packaged software Rich User experiences AJAX Assists in User Interfaces Less machine readable / linkable webpages

7. Uses of AJAX Paradigm Real-Time Form Data Validation Form data that require server-side validation can be validated in a form “before” the user submits it. Auto completion A specific portion of form data may be auto-completed as the user types.

8. Uses of AJAX Paradigm contd.. On Demand Loading Based on a client event, an HTML page can fetch more detailed information on data without refreshing the page. Refreshing data and server push: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data. Sophisticated UI Controls Controls such as tree controls, menus, and progress bars may be provided without page refreshes.

9. Components HTML (or XHTML) and CSS Presenting information Document Object Model Dynamic display and interaction with the information XMLHttpRequest object Retrieving data ASYNCHRONOUSLY from the web server . Javascript Binding everything together

10. Web Application and AJAX

11. Request Processing

12. AJAX Architecture Create an XMLHttpRequest object Make a HTTP request to the server Register your callback function for handling the response Handle the response, check for return status Parse the response on success, display result

13. Example using XMLHttpRequest – Step 1 Create Object Objects are Browser Specific. Example var requester = new ActiveXObject("Microsoft.XMLHTTP"); (for IE 5 & IE 6 browsers) var requester = new XMLHttpRequest(); (for firefox, mozilla & others)

14. Using XMLHttpRequest – Step 2 Transferring data to Server Open() to initialize connection to Server Send() to send the actual Data Example requester.open("POST", "/query.cgi“,true) requester.send("name=Bob&email=bob@example.com"); METHOD PATH CONNECTION TYPE

15. What happens after sending data ? XMLHttpRequest contacts the server and retrieves the data Can take indeterminate amount of time Event Listener to determine when the object has finished retrieving data Specifically listen for changes in “readyState” variable

16. Using XMLHttpRequest – Step 3 Set up a function to handle the event when the readyState is changed to 4 0 – Uninitialised 1 – open 2 – sent 3 – receiving 4 – Completed Example requester.onreadystatechange = stateHandler;

17. Using XMLHttpRequest – Step 3 Contd Check whether the XMLHttpRequest object successfully retrieved the data, or give an error code Example if (requester.readyState == 4) { if (requester.status == 200) { success(); } }

18. Using XMLHttpRequest – Step 4 Parse and display data responseXML responseText Example var nameNode = requester.responseXML.getElementsByTagName("name")[0]; var nameTextNode = nameNode.childNodes[0]; var name = nameTextNode.nodeValue;

19. SAMPLE CODE var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { // success, process data } } }; xhr.open(“GET”, “http://www.foo.com/bar”, true); xhr.send(null);

20. Advantages Rich User Interface Highly Responsive Lower Bandwidth Usage Separation of content, formatting, and behavior

21. Problems Breaking the “back” button Browsers record static page visits Can’t see previous content of same page. Invisible IFrames can invoke changes that populate the history Book marking a particular “State” becomes difficult JavaScript generates the page NOT found server error

22. Problems Contd.. Increase in the code size on browser Response time affected Difficult to debug Processing logic both in client and server Viewable Source Open to hackers or plagiarism Server Load Asynchronous request is a “heavy” operation

23. Ajax Libraries and Frameworks dojo Toolkit Google Web Toolkit Microsoft Atlas Prototype Script.aculo.us YUI and a lot more ...

24. Who is using AJAX ?

25. Reading Material Overview http://en.wikipedia.org/wiki/AJAX http://java.sun.com/developer/technicalArticles/J2EE/AJAX/index.html?cid=59754 Original Article from Adaptive path http://www.adaptivepath.com/publications/essays/archives/000385.php Examples http://www.sitepoint.com/article/remote-scripting-ajax.html http://www.mousewhisperer.co.uk/ajax_page.html http://www.clearnova.com/ajax/ http://www.webpasties.com/xmlHttpRequest/ AJAX based Applications http://www.ajaxreview.com/ http://ajaxblog.com/ Issues/Problems http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html

26. Thank You Questions ?