1. AJAX
Robin Burke
ECT 360

2. Outline
Admin
Final Project
AJAX
AJAX lab

3. Homework #5
Due Wednesday
Questions?

4. Examples Business card maker Google Select
Google Select

5. Application model
from

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

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

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

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

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

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

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

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

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

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

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

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

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

19. Example
ajax1.html
ajax1.php

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

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

22. Example
ajax2.html
ajax2.php

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

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

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

26. Example
Google Maps

27. Compare with
Mapquest

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

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