Introduction to Ajax

Introduction to Ajax Asynchronous JavaScript and XML Presented to the MIS Club November 22, 2005 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 2005

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