introduction to ajax n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Introduction to Ajax PowerPoint Presentation
Download Presentation
Introduction to Ajax

Loading in 2 Seconds...

play fullscreen
1 / 14

Introduction to Ajax - PowerPoint PPT Presentation


  • 116 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Introduction to Ajax' - orien


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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
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,...)

slide3

XHTML

Structure

Format

Content

Style

Sheets

Dynamic

HTML

XML

JavaScript &

Document

Object

Model

(DOM)

Cascading

Style

Sheets

(CSS)

Extensible

Stylesheet

Language

(XSL)

web applications1
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 applications2
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
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
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
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)

slide9

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>

&nbsp;&nbsp;&nbsp;

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

slide10

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

slide11

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>

slide12

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