Using AJAX

Galip Aydin, Ahmet Sayar, and Marlon Pierce

Community Grids LabIndiana University

What Is AJAX?• Asynchronous JavaScript and XML is a combination of

standard Web technologies– JavaScript, CSS, DOM, XML

• When done properly, it provides apparently seamless interactivity in browser clients.– No browser reloads– Much smoother than standard request-wait-response for browser

forms.• Several Google tools are a very well known examples.

– Google maps, Gmail, etc.• The real key is the standardization of the XMLHttpRequest

Object– Originally developed for Internet Explorer– Now supported by all major browsers.

• Seminal article from Adaptive Path– http://www.adaptivepath.com/publications/essays/archives/000385.p

hp

AJAX Architecture

Taken from http://www.adaptivepath.com/publications/essays/archives/000385.php

The Main Idea: Asynchronous JavaScript Calls to Server

• AJAX’s key concept is the use of XMLHttpRequest to buffer requests and responses within the browser.– Use XMLHttpRequest to make a call to the server and

get back the response without displaying it.– The response is stored locally as either plain text (plain

or HTML), or XML.– JavaScript + DOM can be used to walk the HTML or XML

tree to handle most user interactions.• The XMLHttpRequest object in turn can issue

requests and process responses independently of the user’s interaction.– Go and fetch additional maps, for example.

Asynchronous Invocations

How it Works

Simple Example: GIS and Google Maps

• The Web Feature Service is a standard geographical information system service.– It stores geographic features and metadata used to

construct maps.– Features are represented with the Geographic Markup

Language– For example, the location and properties of earthquake

faults and seismic events.

• The Feature Service is typically constructed around traditional request-response.

• We would like to combine this with Google Maps to make more interactive user interfaces.

• So let’s get started.

Integrating Google Maps and GIS Services

ClientMAP interface

Google MapServer

OGC WFSFeature Data Server

Simple Architecture

Supported Feature Data by the WFS

Layer specific parameters for filtering

Making the request

• Creating an XMLHttpRequest Object– For any browser, except IE

• var requester = new XMLHttpRequest();– In IE

• var requester = new ActiveXObject("Microsoft.XMLHTTP");

• Transporting Data using an XMLHttpRequest Object – To retrieve data from the server we use two methods:

open() to initialize the connection, send() to activate the connection and make the request. requester.open("GET", "getFaultNames.jsp?State=CA"); requester.send(null);

• This request is for all California fault information in the Feature Service.– It will be encoded in GML– It may take a bit of time to download….

Checking the Connection Status

• To find out if the data retrieval is done we check the status of the readyState variable. Object’s status may be any of the following:

0 – Uninitialised 1 – Loading 2 – Loaded 3 – Interactive 4 – Completed

– requester.onreadystatechange monitors the readyState variables status.if (requester.readyState == 4){  if (requester.status == 200){

   success();  } else{    failure();

} }

Parsing the Data• After a successful request XMLHttpRequest object may hold data

in one of the two properties: responseXML or responseText.• responseXML stores a DOM-structured XML data.

<Fault> <Name>San Andreas</Name>

</Fault>

• We use JavaScript XML parsing methods such as getElementsByTagName(), childNodes[], parentNode… var faultNameNode =

requester.responseXML.getElementsByTagName(“Name")[0]; var faultName = faultNameNode.childNodes[0].nodeValue;

• We can then use Google Map JavaScript functions to create the browser display.

• responseText stores the data as one complete string in case the content type of the data supplied by the server was text/plain or text/html.

Ajax Calls From JSP Pages

• In the 1st JSP page function checkForMessage() {

var url = "relay.jsp";

initRequest(url);

req.onreadystatechange = processReqChange;

req.open("GET", url, true);

req.send(null);

}

• The request is forwarded to relay.jsp

• In the 2nd JSP page (relay.jsp)<%Bean.getNames(response);

%>

• The response object will contain the XML result object.

Integrating Web Feature Service

Archives and Google Maps

Google maps can be integrated with Web Feature Service Archives to browse earthquake fault records.

Faults are typically stored by segment number, so map interfaces are convenient for both verifying continuity and setting up input files for computing problems.

Other Useful Examples

• AJAX is also useful for simulating server data pushing.– Browser interface is updated periodically from locally

stored data. – XMLHttpRequest periodically requests updates

asyncrhonously.• Replace annoying browser reload polling and

fragile, non-standard server push.• The browser is always available for user

interactions while the XMLHttpRequest object is being updated.

• Examples: Chat applications and GPS streams

Real Time GPS and Google Maps

Subscribe to live GPS station. Position data from SOPAC is combined with Google map clients.

Select and zoom to GPS station location, click icons for more information.