Transcript Using AJAX Galip Aydin, Ahmet Sayar, and Marlon Pierce Community Grids Lab Indiana University.

Using AJAX
Galip Aydin, Ahmet Sayar, and Marlon
Pierce
Community Grids Lab
Indiana 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.ph
p
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
Simple Architecture
Client
MAP interface
Supported
Feature Data
by the WFS
Google Map
Server
OGC WFS
Feature Data Server
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.