Introduction to Ajax

Asynchronous JavaScript and XML Introduction to Ajax Professor Stephen K. Kwan MIS, College of Business San José State University http://www.cob.sjsu.edu/kwan_s kwan_s@cob.sjsu.edu © Stephen. K. Kwan 2009

Web Applications A Client/Server Computing Model ( A Generic Diagram ) A State-less Environment HTTP REQUEST Client Computer Browser (URL,Post,Get,parameters,..) Server Computer HTTP Service HTTP RESPONSE (XHTML,contents,...)

XHTML Structure Format Content Style Sheets Dynamic HTML XML JavaScript & Document Object Model (DOM) Cascading Style Sheets (CSS) Extensible Stylesheet Language (XSL)

Web Applications Default Synchronous Processing Scenario A State-less Environment Client Browser (state A) HTTP REQUEST HTTP Server (state A) Client Browser (state B) HTTP RESPONSE New Page e.g. SJSU (state A + … = state B)

Web Applications Asynchronous Processing Scenario Client Browser (state A) REQUEST HTTP Server RESPONSE – New Page Client Browser (state B) REQUEST/RESPONSE Client Browser (state C) REQUEST/RESPONSE Client Browser (state D) Using XMLHttpRequest Object

Examples • Google Map (SJSU) • Google Map (Neighborhood 1) • Google Map (Neighborhood 2) • NetFlix.com • Worklife Survey (old tooltip) • MUSE Calendar (regular) • MUSE Calendar (Ajax tooltip) • www.2locals.com (Ajax) Go 1 Go 2 Go 3 Go 4 Go 5 Go 6 Go 7 Go 8

Google Map APIs Sign up for Google Map APIs: http://www.google.com/apis/maps/ Documentation and Sample Codes http://www.google.com/apis/maps/documentation/ Some Additional Resources & Samples On Line http://mapki.com/index.php?title=Available_Images http://www.infosports.com/m/map.htm http://googlemapsmania.blogspot.com/ http://www.housingmaps.com/ http://developer.mozilla.org/en/docs/AJAX http://www.walterzorn.com/tooltip/tooltip_e.htm

Google Map Example http://misweb.cob.sjsu.edu/skwan/google/samplegooglemap.htm (see source file for correct sequence of statements) • Initial Set up <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAjQHPzf7OEPPSzPS0Jf_qTBTrgAu8jkUMDNwMICkLUS5q1JhmMRQ97xlT2QU_VUva8CuwakFyBAJR2g" type="text/javascript"></script> <style type="text/css"> v\:* { behavior:url(#default#VML); } </style> 2. Define Functions (not shown here)

3. What the HTML looks like: <body onload="onLoad()"> <center> <b><font size=+2>Five Wounds/Brookwood Terrace Neighborhood</font><br> <a href="javascript:ClearAll();">Clear</a> <a href="javascript:ShowLine();">Show</a> <table border=1> <td> <td><div id="map" style="width: 700px; height: 500px"> </div> <center><div id="message"></div> </table> </body>

4. On Load of web page draw map function onLoad(){ map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); GEvent.addListener(map, "moveend", function() { var center = map.getCenterLatLng(); var latLngStr = 'Center: (' + center.y + ', ' + center.x + ')'; document.getElementById("message").innerHTML = latLngStr; }); map.centerAndZoom (new GPoint (-121.8606948852539,37.345596738248986), 3);

4. Use Ajax to get XML file of points var request = GXmlHttp.create(); request.open("GET", "data2.xml", true); <markers> <marker lng="-121.8672" lat="37.3302"/> <marker lng="-121.8524" lat="37.3391"/> <marker lng="-121.8615667" lat="37.3499"/> <marker lng="-121.8555167" lat="37.35305"/> <marker lng="-121.8632667" lat="37.36086667"/> <marker lng="-121.8692" lat="37.35633333"/> <marker lng="-121.8736" lat="37.3596"/> <marker lng="-121.8746" lat="37.3435"/> <marker lng="-121.8668" lat="37.3362"/> </markers>

5. When file is ready, parse coordinates from XML and create a points array. Draw line connecting points. request.onreadystatechange = function() {if (request.readyState == 4) {var xmlDoc = request.responseXML; var markers = xmlDoc.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) {var point = new GPoint(parseFloat(markers[i].getAttribute("lng")), parseFloat(markers[i].getAttribute("lat"))); points[i]=point; } } points.push(points[0]); ShowLine(); } request.send(null); } function ShowLine() { map.addOverlay(new GPolyline(points));} Try It!

Tool Tip Example <script type="text/javascript"> var xmlHttp; var tipText; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function doRequestUsingGET(Q) { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", Q, true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { tipText=xmlHttp.responseText; } } } </script> Try It!

How to start? • Learn JavaScript and how to work with DOM • Sign up for Google Map APIs • Study the Google Map documentation and try • Take advantage of online resources (lots) • Get a book to read and learn from the code: • R. Asleson and N. Schutta • Foundations of Ajax, Apress, 2006. • R. Crane, E. Pascarello, D. James • Ajax in Action, Manning, 2006. End

Introduction to Ajax