Ajax

Overview

• Asynchronous JavaScript and XML
• Ajax serves some of the purposes that Java Applets used to be used for

Request

• Create an HTTP request object:

httpRequest = new XMLHttpRequest();

• Specify an XML mime-type header:

httpRequest.overrideMimeType('text/xml');

• Specify the callback function:

httpRequest.onreadystatechange = function() { my_callback_function(parameters); };

• Call the open() and send() methods of the HTTP request object:

httpRequest.open('[GET, POST, HEAD]', '<URL>', true);
httpRequest.send([null, url_parameters_to_POST]);

• The third parameter in the open() method indicates whether the request is asynchronous

• If POST-ing the request, change the mime type to support URL parameters

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Callback function

• Check the state of the request (4 means ready)

• 0: Uninitialized
• 1: Loading
• 2: Loaded
• 3: Interactive
• 4: Complete

• Check the status code of the HTTP server response

Codes that indicate success

• 200
• 0: If the page is being accessed locally without the use of a web server
• 203: If the page is being served through a proxy server with local caching
• 304: If the page is cached and has not been modified.
  

• Access the data using one of the following:

• http_request.responseText: String
  
• http_request.responseXML: XMLDocument object (use the JavaScript DOM functions to traverse it)

• getElementsByTagName(name)

• childNodes[i].nodeValue

• attributes[i].nodeName
• attributes[i].nodeValue

• getAttribute(name)   // Return null if it fails to retrieve a value (older browsers may return an empty string)
• setAttribute(name, value)

• Large text nodes may be split into multiple nodes

• Updating an HTML element in the page

• innerHTML

Communication

• XMLHttpRequest object (JavaScript)
  

• Sometimes an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server

Requirements

• Requires that JavaScript is enabled in the web browser
• For IE <= 6, also requires that ActiveX is enabled

IE4

• http_request.open() does not appear to be supported (or the browser in question does not have ActiveX installed)
  

Usability

• Avoiding breaking the back button (where appropriate)
  

• Common solutions involve creating or using invisible IFRAMEs to invoke changes that populate the history used by a browser's back button..
  
• Can make requests in an invisible IFRAME and pull the results into an element on the visible web page.
  
• It's possible to track user behaviour via callbacks which are called whenever the back button is pressed, restoring the application state that existed at the time.
  

• Providing a way to return to a specific state (URL, self-referential link) (fragment identifiers are useful for this)

• Many browsers allow JavaScript to update the fragment identifier of the URL dynamically, so that Ajax applications can maintain it as the user changes the application's state.
• This solution also improves back-button support.

Fragment identifier

scheme://authority/path?query#fragment

• Identifying the state of an Ajax web page
• Linking to an anchor within a web page

http://www.domain.com/page.html#name
http://www.domain.com/page.html?id=12&lang=eng#name

Misc

• Ajax Toolkit Framework (Eclipse)