using ajax galip aydin, ahmet sayar, and marlon pierce community grids lab indiana university
Post on 22-Dec-2015
219 views
TRANSCRIPT
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
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.
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