Introduction to Ajax Professor Stephen K. Kwan MIS, College of Business San José State University Asynchronous JavaScript and XML © Stephen. K. Kwan 2009
Web Applications A Client/Server Computing Model ClientComputerBrowserServerComputerHTTPService HTTP REQUEST HTTP RESPONSE (URL,Post,Get,parameters,..) (XHTML,contents,...) ( A Generic Diagram ) A State-less Environment
XHTML HTML StyleSheets XML CascadingStyleSheets(CSS)ExtensibleStylesheetLanguage(XSL) StructureFormatContent Dynamic JavaScript & DocumentObjectModel(DOM)
Web Applications ClientBrowser (state A) HTTPServer HTTP REQUEST HTTP RESPONSE New Page Default Synchronous Processing Scenario ClientBrowser (state B) e.g. SJSU A State-less Environment (state A) (state A + … = state B)
ClientBrowser (state D) Web Applications ClientBrowser (state A) HTTPServer REQUEST RESPONSE – RESPONSE – New Page Asynchronous Processing Scenario ClientBrowser (state C) ClientBrowser (state B) REQUEST/RESPONSE REQUEST/RESPONSE Using XMLHttpRequest Object
Examples Google Map (SJSU) 1. Google Map (SJSU) 2. Google Map (Neighborhood 1) 3. Google Map (Neighborhood 2) 4. NetFlix.com 5. Worklife Survey (old tooltip) 6. MUSE Calendar (regular) 7. MUSE Calendar (Ajax tooltip) 8. (Ajax) Go 1 Go 2 Go 3 Go 4 Go 6 Go 7 Go 8 Go 5
Google Map APIs Sign up for Google Map APIs: Documentation and Sample Codes Some Additional Resources & Samples On Line
Google Map Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xmlns:v="urn:schemas-microsoft-com:vml"> v\:* { behavior:url(#default#VML); } 1. Initial Set up 2. Define Functions (not shown here) (see source file for correct sequence of statements)
3. What the HTML looks like: Five Wounds/Brookwood Terrace Neighborhood Clear Show
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 ( , ), 3);
4. Use Ajax to get XML file of points var request = GXmlHttp.create(); request.open("GET", "data2.xml", true);
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));} 5. When file is ready, parse coordinates from XML and create a points array. Draw line connecting points. Try It!
Tool Tip Example 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; } } } 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, R. Crane, E. Pascarello, D. James Ajax in Action, Manning, End