Using AJAX

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

2. 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.php

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

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

5. Asynchronous Invocations

6. How it Works

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

8. Integrating Google Maps and GIS Services Simple Architecture Supported Feature Data by the WFS Layer specific parameters for filtering

9. 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….

10. 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(); } }

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

12. 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. Ajax Calls From JSP Pages

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

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

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