Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to Ajax Professor Stephen K. Kwan MIS, College of Business San José State University Asynchronous.

Published by Modified over 9 years ago

Similar presentations

Presentation on theme: "Introduction to Ajax Professor Stephen K. Kwan MIS, College of Business San José State University Asynchronous."— Presentation transcript:

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

2 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

3 XHTML HTML StyleSheets XML CascadingStyleSheets(CSS)ExtensibleStylesheetLanguage(XSL) StructureFormatContent Dynamic JavaScript & DocumentObjectModel(DOM)

4 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)

5 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

6 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. www.2locals.com (Ajax) Go 1 Go 2 Go 3 Go 4 Go 6 Go 7 Go 8 Go 5

7 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/ 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 Some Additional Resources & Samples On Line

8 Google Map Example http://misweb.cob.sjsu.edu/skwan/google/samplegooglemap.htm <!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"> v\:* { behavior:url(#default#VML); } 1. Initial Set up 2. Define Functions (not shown here) (see source file for correct sequence of statements)

9 3. What the HTML looks like: Five Wounds/Brookwood Terrace Neighborhood Clear Show

10 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);

11 4. Use Ajax to get XML file of points var request = GXmlHttp.create(); request.open("GET", "data2.xml", true);

12 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!

13 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!

14 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

Download ppt "Introduction to Ajax Professor Stephen K. Kwan MIS, College of Business San José State University Asynchronous."

Similar presentations

Mash-it-up Google Style Put your data on the Map.

Mash-it-up Google Style Put your data on the Map.
AJAX Asynchronous JavaScript and XML. AJAX An interface that allows for the HTTP communication without page refreshment Web pages are loaded into an object.

AJAX Asynchronous JavaScript and XML. AJAX An interface that allows for the HTTP communication without page refreshment Web pages are loaded into an object.
Davis Dai. Introduction  Acronym for “asynchronous JavaScript and XML”  Combination of various technologies  Was not developed as an official standard.

Davis Dai. Introduction  Acronym for “asynchronous JavaScript and XML”  Combination of various technologies  Was not developed as an official standard.
AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006.

AJAX Presented by: Dickson Fu Dimas Ariawan Niels Andreassen Ryan Dial Jordan Nielson CMPUT 410 University of Alberta 2006.
CS 142 Lecture Notes: HTMLSlide 1 Introduction There are several good reasons for taking CS142: Web Applications: ● You will learn a variety of interesting.

CS 142 Lecture Notes: HTMLSlide 1 Introduction There are several good reasons for taking CS142: Web Applications: ● You will learn a variety of interesting.
19-Jun-15 Ajax. The hype Ajax (sometimes capitalized as AJAX) stands for Asynchronous JavaScript And XML Ajax is a technique for creating “better, faster,

19-Jun-15 Ajax. The hype Ajax (sometimes capitalized as AJAX) stands for Asynchronous JavaScript And XML Ajax is a technique for creating “better, faster,
AJAX asynchronous server-client communication. Test.

AJAX asynchronous server-client communication. Test.
Web Applications A Client/Server Computing Model ClientComputerBrowserServerComputerHTTPService HTTP REQUEST HTTP RESPONSE (URL,Post,Get,parameters,..)

Web Applications A Client/Server Computing Model ClientComputerBrowserServerComputerHTTPService HTTP REQUEST HTTP RESPONSE (URL,Post,Get,parameters,..)
AJAX (Asynchronous JavaScript and XML) Amit Jain CS 590 – Winter 2008.

AJAX (Asynchronous JavaScript and XML) Amit Jain CS 590 – Winter 2008.
XMLHttpRequest Object and XML What we should learn in this lesson –What is the XHR object? –How to create the XHR objects? –XHR object properties –XHR.

XMLHttpRequest Object and XML What we should learn in this lesson –What is the XHR object? –How to create the XHR objects? –XHR object properties –XHR.
Introduction to XHTML Professor Stephen Kwan. 2 XHTML HTML StyleSheets XML CascadingStyleSheets(CSS) ExtensibleStylesheetLanguage(XSL) StructureFormatContent.

Introduction to XHTML Professor Stephen Kwan. 2 XHTML HTML StyleSheets XML CascadingStyleSheets(CSS) ExtensibleStylesheetLanguage(XSL) StructureFormatContent.
Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server.

Prof. James A. Landay University of Washington Spring 2008 Web Interface Design, Prototyping, and Implementation Rich Internet Applications: AJAX, Server.
Making AJAX Easy with jQuery Chris Renner Health Systems Analyst Programmer & Informatics Manager VUMC Office of Grants & Contracts Management October.

Making AJAX Easy with jQuery Chris Renner Health Systems Analyst Programmer & Informatics Manager VUMC Office of Grants & Contracts Management October.
Writing All Your Code In OpenEdge Architect Peter van Dam.

Writing All Your Code In OpenEdge Architect Peter van Dam.
AJAX Workshop Karen A. Coombs University of Houston Libraries Jason A. Clark Montana State University Libraries.

AJAX Workshop Karen A. Coombs University of Houston Libraries Jason A. Clark Montana State University Libraries.
Internet Applications Spring 2008. Review Last week –MySQL –Questions?

Internet Applications Spring Review Last week –MySQL –Questions?
Ajax (Asynchronous JavaScript and XML). AJAX  Enable asynchronous communication between a web client and a server.  A client is not blocked when an.

Ajax (Asynchronous JavaScript and XML). AJAX  Enable asynchronous communication between a web client and a server.  A client is not blocked when an.
PHP and AJAX ISYS 475. AJAX Asynchronous JavaScript and XML: – JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net,

PHP and AJAX ISYS 475. AJAX Asynchronous JavaScript and XML: – JavaScript, Document Object Model, Cascade Style Sheet, XML, server-side script such as.Net,
Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.

Lecture 12 – AJAX SFDV3011 – Advanced Web Development Reference: 1.
AJAX By Steven Hernandez Research Analyst NIATEC.

AJAX By Steven Hernandez Research Analyst NIATEC.

Similar presentations

Ads by Google