Not a Language but a series of techniques AJAX Not a Language but a series of techniques Copyright © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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

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 © 2008-2015 - Curt Hill

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

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 © 2008-2015 - Curt Hill

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

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

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill

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 © 2008-2015 - Curt Hill