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)