AJAX CS456 Fall 2011

Examples Where is AJAX used? Why do we care?

The web without AJAX Why is this problematic/annoying?

The Web With AJAX

How does it do it? It’s a new way to use the languages we already know A - Asynchronous J A X – XML Also uses DOM and CSS What server-side technologies? JavaScript (client-side)

The overall process Without AJAX we’d return an entire page With AJAX it’s just one piece Client 1.Need small amount of data from server 2.Create XMLHttpRequest object 3.Create a request in that object 4.Send the request through that object 5.Continue doing whatever user wants 6.When receive response from server, update page Server 1.Receive request 2.Send information to client as XML

Example What is this technique doing? What else can we do with the exact same simple approach?

More Advanced Example Instead of returning an html file and displaying all of it, we can send back specific sets of information and read it like a text file

So what are all of these functions? Properties of XMLHttpRequest Object: PropertyDescription onreadystatechangeStores the callback function – the handler that is called when server responds to request readyStateKeeps track of request’s progress: 0: uninitialized 1:loading 2: loaded 3: being sent from server 4: completed responseTextText returned by server responseXMLXML response from server statusHTTP status code of request statusTextAdditional info on status (can be used to display error to user)

So what are all of these functions? Methods of XMLHttpRequest Object: MethodDescription openInitializes request with 2 mandatory parameters: Method (GET or POST) and URL (address of file on server to generate response). Optional 3 rd parameter is true if asynchronous (default). sendSends request to server. Optional parameter specifies data to be POSTed to server (null by default).

XML You can return XML instead of text Read it as if it is a document in the DOM More complicated, and thus a lot of people don’t bother JSON: textual way to represent objects in name-value pairs or arrays of values Popular as a simpler alternative to XML Faster to send than XML because files are smaller Faster to parse than XML

Client vs Server What type of processing should happen on client? What type of processing should happen on server? What are our goals in deciding on server or client side? How does AJAX help with achieving those goals?