1. AJAX Rohan B Thimmappa

2. What Is AJAX? AJAX stands for Asynchronous JavaScript and XML. AJAX stands for Asynchronous JavaScript and XML. A remote scripting technique for quick access to server-side information. A remote scripting technique for quick access to server-side information. A combination of several technologies. A combination of several technologies.

3. History of AJAX The first instance of it was Microsoft’s XMLHTTP ActiveX Control for web-based access to Outlook/Exchange email in 1998, around the time XML began to be taken seriously. The first instance of it was Microsoft’s XMLHTTP ActiveX Control for web-based access to Outlook/Exchange email in 1998, around the time XML began to be taken seriously. As XMLHTTP matured, it was adopted by other browsers as XMLHttpRequest in their attempts to become more compatible with Internet Explorer’s proprietary features. As XMLHTTP matured, it was adopted by other browsers as XMLHttpRequest in their attempts to become more compatible with Internet Explorer’s proprietary features. Today, XMLHTTP/XMLHttpRequest is the foundation of AJAX and it is what handles the communication between the client and the server. Today, XMLHTTP/XMLHttpRequest is the foundation of AJAX and it is what handles the communication between the client and the server.

4. DHTML vs AJAX Dynamic HTML Dynamic HTML Client side only Client side only Commonly Used for navigation menu, forms…etc Commonly Used for navigation menu, forms…etc AJAX AJAX Client and server side Client and server side Used to enrich DHTML’s capabilities. Used to enrich DHTML’s capabilities.

5. Modern Examples Flickr Flickr GMail GMail Google Maps Google Maps Google Suggest Google Suggest Kayak.com Kayak.com Microsoft’s Atlas toolkit for ASP.NET 2.0 Microsoft’s Atlas toolkit for ASP.NET 2.0

6. How AJAX Compares To The Traditional Approach

7. Example

8. 1. A client event occurs. A client event occurs.A client event occurs. User try to enter the value into the Text Field User try to enter the value into the Text Field JavaScript technology functions are called as the result of an event. In this case, the function validate() may be mapped to a onkeyup event on a link or form component. JavaScript technology functions are called as the result of an event. In this case, the function validate() may be mapped to a onkeyup event on a link or form component. This will make this Text Field call validate function each time user type value. This will make this Text Field call validate function each time user type value.

9. 2. Creation of XMLHttpRequest object is created and configuration var req; function validate() { var idField = document.getElementById("userid"); var idField = document.getElementById("userid"); var url = "validate?id=" + escape(idField.value); var url = "validate?id=" + escape(idField.value); if (window.XMLHttpRequest) { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req = new XMLHttpRequest(); } else if (window.ActiveXObject) { } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", url, true); req.open("GET", url, true); req.onreadystatechange = callback; req.onreadystatechange = callback; req.send(null); req.send(null);}

10. 2. Creation of XMLHttpRequest object is created and configuration var req; function validate() { var idField = document.getElementById("userid"); var idField = document.getElementById("userid"); var url = "validate?id=" + escape(idField.value); var url = "validate?id=" + escape(idField.value); if (window.XMLHttpRequest) { if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req = new XMLHttpRequest(); } else if (window.ActiveXObject) { } else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); req = new ActiveXObject("Microsoft.XMLHTTP"); } req.open("GET", url, true); req.open("GET", url, true); req.onreadystatechange = callback; req.onreadystatechange = callback; req.send(null); req.send(null);}

11. XMLHttpRequest objects if (window.XMLHttpRequest) { // For Non- IE Browser // For Non- IE Browser req = new XMLHttpRequest(); req = new XMLHttpRequest(); } else if (window.ActiveXObject) { } else if (window.ActiveXObject) { // For IE Browser // For IE Browser req = new ActiveXObject("Microsoft.XMLHTTP"); req = new ActiveXObject("Microsoft.XMLHTTP"); }

12. Open function req.open("GET", url, true); req.open("GET", url, true); The open function requires three arguments: The open function requires three arguments: the HTTP method, which is GET or POST; the HTTP method, which is GET or POST; The URL of the server-side component that the object will interact with; The URL of the server-side component that the object will interact with; boolean indicating whether or not the call will be made asynchronously. boolean indicating whether or not the call will be made asynchronously.

13. 3. XMLHttpRequest object makes a call. req.send(null); When the statement req.send(null); is reached, the call will be made. In the case of an HTTP GET, this content may be null or left blank. The data that is posted (id) is included as a URL parameter. An HTTP POST requires a Content-Type header to be set on the XMLHttpRequest object by using the following statement: req.setRequestHeader("Content-Type", "application/x- www-form-urlencoded"); req.send("id=" + escape(idTextField.value));

14. 4.The request is processed by the ValidateServlet. public class ValidateServlet extends HttpServlet { private ServletContext context; private HashMap users = new HashMap(); public void init(ServletConfig config) throws ServletException { this.context = config.getServletContext(); users.put("greg","account data"); users.put("duke","account data"); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { String targetId = request.getParameter("id"); \* valid *\ if ((targetId != null) && !users.containsKey(targetId.trim())) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("valid"); } else { } else { response.setContentType("text/xml"); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("invalid"); response.getWriter().write("invalid"); } } }

15. 5.Callback() function and processes the result. req.onreadystatechange = callback; function callback() { if (req.readyState == 4) { if (req.readyState == 4) { if (req.status == 200) { var message =req.responseXML.getElementsByTagName("message")[0]; return message; return message; } } } }

16. XMLHttpRequest Properties onreadystatechange – This is a method delegate for a function that handles the processing of the HTTP transaction as well as the response text or XML. onreadystatechange – This is a method delegate for a function that handles the processing of the HTTP transaction as well as the response text or XML. readyState – The state of the transaction readyState – The state of the transaction 0 – uninitialized 0 – uninitialized 1 – loading 1 – loading 2 – loaded 2 – loaded 3 – interactive 3 – interactive 4 – complete 4 – complete status – The HTTP response code for the operation. All processing should occur when this flag is equal to 200 only. Error handling should be invoked on either 404 or 500. status – The HTTP response code for the operation. All processing should occur when this flag is equal to 200 only. Error handling should be invoked on either 404 or 500. statusText – The text that explains the status code. statusText – The text that explains the status code. responseText – The text of the response from the server. responseText – The text of the response from the server. responseXML – If XML is sent back by the server, you may handle the response as a XML document using this property which returns a DOM tree of the responseText. responseXML – If XML is sent back by the server, you may handle the response as a XML document using this property which returns a DOM tree of the responseText.

17. A Quick Recap To Using XMLHttpRequest Create a function that returns a XMLHttpRequest/XMLHTTP object appropriate for the browser in use. Create a function that returns a XMLHttpRequest/XMLHTTP object appropriate for the browser in use. Create a function for processing the response XML from the server. Create a function for processing the response XML from the server. Associate your XMLHttpRequest instance’s onreadystatechange delegate with your function. Ex: httpRequest.onreadystatechange = applyChanges; Associate your XMLHttpRequest instance’s onreadystatechange delegate with your function. Ex: httpRequest.onreadystatechange = applyChanges; Use the open method to connect to the server. Use the open method to connect to the server. Use the send method to do a transaction. Use the send method to do a transaction. If POST, the parameter must be a proper POST string such as, var1=1&var2=2&var3=3 If POST, the parameter must be a proper POST string such as, var1=1&var2=2&var3=3 If GET, “” and null may be passed since parameters will have to be passed as part of the URL. If GET, “” and null may be passed since parameters will have to be passed as part of the URL. When you need to repeat, reinitialize the XMLHttpRequest and reset its onreadystatechange delegate. When you need to repeat, reinitialize the XMLHttpRequest and reset its onreadystatechange delegate.

18. How to best use AJAX Use it for small updates to the web page. Use it for small updates to the web page. Build as much of the user interface for the web page statically as possible in order to limit how many AJAX calls are needed. Build as much of the user interface for the web page statically as possible in order to limit how many AJAX calls are needed.

19. How Not To Use AJAX Each AJAX operation causes a new HTTP transaction so overuse can quickly bring down a heavily trafficked webserver. Each AJAX operation causes a new HTTP transaction so overuse can quickly bring down a heavily trafficked webserver. Don’t use it where it makes more sense to submit a form. Don’t use it where it makes more sense to submit a form. Don’t use it for calculations and interface updates that can be done with client-side operations only. Don’t use it for calculations and interface updates that can be done with client-side operations only.

20. Simple Ways To Use AJAX.NET.NET Microsoft’s Atlas Toolkit Microsoft’s Atlas Toolkit Java Java AjaxAnywhere AjaxAnywhere AjaxTags AjaxTags Ruby Ruby Ruby On Rails Ruby On Rails Python Python TurboGears TurboGears PHP PHP Sajax Sajax HTML_AJAX (In the PEAR Repository) HTML_AJAX (In the PEAR Repository)

21. More Information And Credits Read the following for more information: Read the following for more information: http://developer.apple.com/internet/webcontent/xmlhttpreq.html http://developer.apple.com/internet/webcontent/xmlhttpreq.html http://developer.apple.com/internet/webcontent/xmlhttpreq.html http://www.xml.com/pub/a/2005/02/09/xml-http-request.html http://www.xml.com/pub/a/2005/02/09/xml-http-request.html http://www.xml.com/pub/a/2005/02/09/xml-http-request.html http://www.adaptivepath.com/publications/essays/archives/0003 85.php http://www.adaptivepath.com/publications/essays/archives/0003 85.php http://www.adaptivepath.com/publications/essays/archives/0003 85.php http://www.adaptivepath.com/publications/essays/archives/0003 85.php http://en.wikipedia.org/wiki/Ajax_%28programming%29 http://en.wikipedia.org/wiki/Ajax_%28programming%29 http://en.wikipedia.org/wiki/Ajax_%28programming%29 Figure on slide 5 taken from http://www.adaptivepath.com/images/publications/essays/ajax- fig1.png Figure on slide 5 taken from http://www.adaptivepath.com/images/publications/essays/ajax- fig1.png