AJAX Robin Burke ECT 360

Outline Admin Final Project AJAX AJAX lab

Homework #5 Due Wednesday Questions?

Examples Business card maker Google Select http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest/ Google Select http://www.google.com/webhp?complete=1&hl=en

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

What we need Client-side code that can respond to user interface actions (without loading new pages) Client-side code that can formulate requests to a web application A web application that can receive requests and deliver data in XML form Client-side code that can receive XML data and update the user interface

Why is XML important? Not essential possible to implement this pattern with XML but It is designed for data interchange HTML isn't a good fit The client can process it XML parser built into every modern browser Most back-end servers can produce XML for many it will be a basic building block

Responding to user actions JavaScript code to handle user interface actions very standard JavaScript event handling code Use standard HTML form controls Associate function calls with onChange, onClick, onMouseOver, etc. We should all know how to do this

Formulating requests We want to send a request to the web server not for an HTML page, but for an XML document Special object XMLHttpRequest present in IE and other browsers

Achieving asynchrony Distributed systems problem A request goes from client to server The server will take some unknown amount of time to respond How to handle this? With a standard web application the user just waits for the new page to load but no new page is loaded with an AJAX application

Acheiving asynchrony II Recall xmlDoc.async="false"; Makes the JS code wait for the parser to complete synchronous interaction ensures that the document is there when the next line of code executes What happens if async = true?

Achieving asynchrony III A call to "load" will return right away but there is no XML document JavaScript can go on handling user interaction How to know when the document is there?

Achieving asynchrony Three possibilities polling timed polling check continuously until the document arrives "busy waiting" wastes a lot of processor resources timed polling check periodically a bit better but we don't react right away best option the "callback"

Callback "Don't call us, we'll call you." Instead of waiting create a "callback" function associate it with the event we're interested in document loading when the document is loaded function is called now we can process the document

Code outline Data received from form input XMLHttpRequest created Callback function set XMLHttpRequest sent When callback function is called, update page

Details IE only Request Set onReadyStateChange property Mozilla details in examples differences very minor Request ActiveXObject Microsoft.XMLHTTP Set onReadyStateChange property this is the callback function Call open method with HTTP method, url, and async flag Call send method actually transmits request to the server

onReadyStateChange Called every time the "ready state" of the document changes Possible states 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = complete this is the one we care about

Example Very simple What to notice IE / non-IE branches of request part callback function Handling returned document with DOM

Example ajax1.html ajax1.php

One problem Limitation on sending data using GET Another possibility encodes data as part of URL insecure max. length usually about 256 characters Another possibility use POST encodes data as request content

Using POST Differences POST argument data string sent with send method set Content-Type header

Example ajax2.html ajax2.php

Usability We are used to web forms clear input modalities nothing happens until you hit submit confirmation in the form of the new page semantics of the "Back" button

Usability II AJAX breaks this anything on page can be used as input because we can put event handlers anywhere actions can happen at any time determined by programmer confirmation up to programmer convention Back button does nothing or worse

Usability III AJAX applications Burden of usability more like traditional desktop applications Burden of usability is on the developer may be intensified because the application doesn't work the "normal" way

Example Google Maps

Compare with Mapquest

How does this work A large map is sent Mapquest scrolled via JavaScript events additional map sectors loaded as needed Mapquest request to the server for a map with certain parameters

Break Lab 6th floor AJAX exercise I can also answer questions about homework #5