Mastering AJAX for Dynamic Web Applications

1. Ajax Ching-Sheng Lin

2. Introduction • AJAX stands for Asynchronous JavaScript And XML • Made popular in 2005 by Google with Google Suggest • Better, faster, and more user-friendly web applications

3. Comparison1

4. Underlying Technologies • Javascript(for altering the page) • XML (for information exchange)

5. In Client-1 • The XMLHttpRequest object is the kernel. • The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7. • JavaScript(embedded in client site) has to handle events from the form, create an XMLHttpRequest object, and send it (via HTTP) to the server.

6. In Client-2 • For most browsers, var xmlhttp = new XMLHttpRequest(); • For Internet Explorer 6.0+, var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); • For some versions of Internet Explorer var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

7. In Client-3 • Sending a Request to the Server • Create a XMLHttpRequest object. req = new XMLHttpRequest(); 2. Create a connection. req.open(method, URL, asynchronous); 3. Create a function to deal with the status change of XMLHttpRequest. req.onreadystatechange = callback; 4. Sending a request to the server. req.send(null); Ex: <input name="username" type="text" id="username" onBlur="UserNameCheck()">

8. In Server • The server gets a HTTP request • In a servlet, this would go to a doGet or doPost method • Return String or XML

9. In Client-4 function callback() { if (req.readyState == 4) { if (req.status == 200) {parse(); //update the page in client } else { alert('There was a problem with the request.'); } } }

10. In Client-5 • Parse XML • An XML file returned from server site: <?xml version="1.0" ?><info> test. </info> 2. Fetch the information function parse(){ var xmldoc = req.responseXML; var node = xmldoc.getElementsByTagName(‘info'); alert(node.firstChild.data); }

11. Reference • Jesse James Garrett adaptivepath.com • http://www.w3schools.com • Ajax+Lucence(POST&TELECOM PRESS) • http://www.cis.upenn.edu/~matuszek/cit597-2006/