1. Not a Language but a series of techniques
AJAX
Not a Language but a series of techniques
Copyright © Curt Hill

2. Web Browser Interaction
A web browser has a spiky workload
Most of the time it is doing almost nothing
When a link is clicked a server request is sent
During the latency period it is waiting for the server
When server response is complete then it waits again for the user to act
Copyright © Curt Hill

3. Copyright © 2008-2015 - Curt Hill
Passing the Time
When a link is clicked a large state change occurs from one web page to another
Pictures may be loaded with subsequent requests
Still most of the time the browser doing nothing
AJAX is technique to keep the browser busier and incrementally load items while it seems to be idle
Copyright © Curt Hill

4. Copyright © 2008-2015 - Curt Hill
AJAX
Asynchronous JavaScript And XML
The idea of AJAX is to incrementally change the content without the dramatic state change
A communication is set up between the JavaScript program and the server that does not cause a page reload
Small changes without the major reload delay
Copyright © Curt Hill

5. Copyright © 2008-2015 - Curt Hill
AJAX intent
Instead of the vast idle periods do a series of partial updates
These are not as significant as a page reload
Allow the period while the user is reading the page to do something significant
The Asynchronous part of AJAX is the browser is not locked during the partial updates
Copyright © Curt Hill

6. Copyright © 2008-2015 - Curt Hill
Attractions
Makes web applications more responsive
Not much new to learn for the web developers
Use existing and well understood technology:
JavaScript
CSS
DOM
XML
Copyright © Curt Hill

7. Copyright © 2008-2015 - Curt Hill
Central Object
The important JavaScript object varies depending on the browser
On IE it is an ActiveX object
On most others it is called XMLHttpRequest
Both are Host Objects rather than Native
Thus the difference in name
I will call it HttpRequest for the rest of the presentation
Copyright © Curt Hill

8. Copyright © 2008-2015 - Curt Hill
Example of creation
Here is how to create the object: var httpRqst; if (IE) httpRqst = new window.ActiveXObject( “Microsoft.XMLHTTP”); else httpRqst = new XMLHttpRequest();
The actual code is somewhat more complicated
Copyright © Curt Hill

9. Methods and Properties
The HttpRequest object has two methods and one property of particular importance:
open method
send method
onreadystatechange property
Copyright © Curt Hill

10. Copyright © 2008-2015 - Curt Hill
The open method
The open method has three parameters and must be executed first
First parameter is a string that determines request method
Usually GET or POST
Usually best to keep in all caps
Second parameter is a URL
Third parameter is a boolean
Whether to operate asynchronously or not
Copyright © Curt Hill

11. Copyright © 2008-2015 - Curt Hill
Example open
Consider: httpRqst.open(“POST”, ” true);
The second parameter must specify exactly the same server as the page that will send the request
An alias will violate security
Copyright © Curt Hill

12. Copyright © 2008-2015 - Curt Hill
The send method
Two possibilities
If GET is used the data is part of the open string
Send sends it but the parameter is null
If POST is used, Send carries the data
This is used to send the data that will be processed
Copyright © Curt Hill

13. Copyright © 2008-2015 - Curt Hill
The data to send
It has the form of: “key1=val1&key2=val2…”
For POST: httpRqst.open(“POST”, ” true); httpRqst.send(“item=paper&number=10”);
Copyright © Curt Hill

14. Copyright © 2008-2015 - Curt Hill
Example send with Get
Open and send httpRqst.open(“GET”, ” item=paper&number=10”, true); httpRqst.send(null);
No blanks, of course
Copyright © Curt Hill

15. The onreadystatechange property
This is the event handler for when the server responds
This should receive a function name
Function should be parameterless
Leave off the parentheses
The function is being connected with the event and not being called
Copyright © Curt Hill

16. Example event handler assignment
Consider: httpRqst.onreadystatechange = catcher; … function catcher(){ …
This is where the response is received
However it will receive responses it may not need
Copyright © Curt Hill

17. Copyright © 2008-2015 - Curt Hill
Checking
The event handler needs to check what has happened
Two properties to look at:
readyState
status
Copyright © Curt Hill

18. Copyright © 2008-2015 - Curt Hill
readyState
The possible readyState values include:
0 - uninitialized
1 - loading
2 - loaded
3 - still communicating
4 - complete
This is the main one
Until it is complete there is nothing to do
Copyright © Curt Hill

19. Copyright © 2008-2015 - Curt Hill
status
The status gives the server status for this request
A status of 200 means successful
The rest are defined elsewhere but usually indicate some type of failure
A status of 404 means the target file was not found
A status of 500 means internal server error
Copyright © Curt Hill

20. Copyright © 2008-2015 - Curt Hill
Now what?
Once the request is complete and there was no error, how is it accessed?
Two properties contain the results:
responseText contains the response as a string
responseXML contains it as an XML document
Copyright © Curt Hill

21. Copyright © 2008-2015 - Curt Hill
FInally
We now have the ability to send an HTML request to our server
Either synchronously or asynchronously
Then process the resulting response
Copyright © Curt Hill