AJAX

1. AJAX Bharat chaitanya

2. What is AJAX ? • Asynchronous JavaScript and XML is a combination of standard Web technologies for the browser based web applications. • JavaScript, CSS, DOM, XML • It provides seamless interactivity in browser clients. • No browser reloads • Much smoother than standard request-wait-response for browser forms.

3. Main Idea • AJAX’s key concept is the use of XMLHttpRequest to buffer requests and responses within the browser. • Use XMLHttpRequest to make a call to the server and get back the response without displaying it. • The response is stored locally as either plain text (plain or HTML), or XML. • JavaScript + DOM can be used to walk the HTML or XML tree to handle most user interactions.

4. AJAX –Cont • AJAX is combination of several technologies: • For binding and user interaction -JavaScript • For styling - XHTML and CSS • For returned document handling -Document Object Model (DOM) • For data manipulation and conversion -XML and XSLT • For asynchronous data retrieval -XMLHttpRequest

5. XmlHttpRequest (XHR) • An API that can be used by JavaScript, and other web browser scripting languages to transfer XML and other text data to and from a web server using HTTP. • Besides XML, XMLHttpRequest can be used to fetch data in other formats such as HTML or plain text. • XMLHttpRequest is an important part of the Ajax web development technique. It is used to create responsive and dynamic web applications.

7. AJAX Frameworks • Toolkits to ease Ajax development. • Focus solely on the client side, providing easy ways to add visual effects to your pages or streamlining the use of XMLHttpRequest. • Taconite • DOJO • Scriptaculous • High-level approach to Ajax development.

8. AJAX Applications • Google Maps • Gmail • Meebo

9. Pros and cons • Pros • Asynchronous calls to a web server • Open standards • Bandwidth usage • Cons • Browser integration • Reliance on JavaScript • Order of XMLHttpRequests

10. DEMO

11. AJAX code // code for Mozilla, Opera, Safari if (window.XMLHttpRequest) { req = new XMLHttpRequest(); } // code for IE else if (window.ActiveXObject) { try { // For versions later than 5.0 req=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { // For previous versions req = new ActiveXObject("Microsoft.XMLHTTP"); } } req.open("GET", url, true); // true=script continues to run without waiting for response req.onreadystatechange = callback; //must when true req.send(null);

12. Servlet String targetId = request.getParameter("id"); if (targetId.equals("bharat")) { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<message>valid</message>"); } else { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); response.getWriter().write("<message>invalid</message>"); }

13. AJAX Code function callback() { // readyState of 4 signifies request is complete if (req.readyState == 4) { // status of 200 signifies successful HTTP call if (req.status == 200) { parseMessage(); } } }

14. AJAX Code function parseMessage() { var message = req.responseXML.getElementsByTagName("message")[0]; setMessage(message.childNodes[0].nodeValue); } function setMessage(message) { var mdiv = document.getElementById("userIdMessage"); if (message == "invalid") { mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>"; } else { mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>"; } }