Ajax Fundamentals – Part 1

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

1. Introduction to Ajax

On the 18’th of February 2005 Jesse James Garret introduced the term Ajax in an article called “Ajax: A New Approach to Web Applications“. That article explained that Ajax is an acronym for Asynchronous JavaScript and XML. It is a way of using existing web-based technologies to provide a rich user interface to websites. It is a design pattern and not a new language and it is not a W3C standard.

In his article, Jesse Garrett lists the properties of Ajax:

  • standards-based presentation using XHTML and CSS
  • dynamic display and interaction using the Document Object Model
  • data interchange and manipulation using XML and XSLT
  • asynchronous data retrieval using XMLHttpRequest
  • and JavaScript binding everything together

In order for a classic web page to respond to a users input, an HTTP request needs to be sent to the server. The server processes the input and replies with an HTML page. Thus the entire page needs to be reloaded in order to provide a response to the user. This request/reply model can be tedious for a user. Ajax proposes a different model.Using the Ajax method a script can send asynchronous HTTP requests from the browser to the server. The script is notified when the response arrives at the browser, and can process the response. Units of data can be requested and processed without the user being disrupted by a complete page refresh. Garrett provides a graphical depiction of the Ajax model in the following image.

Ajax Fundamentals - Life Cycle

2. The XMLHttpRequest Object

The Ajax design pattern is built on the XMLHttpRequest object. XMLHttpRequest object was developed by Microsoft as part of Outlook Web Access 2000. XMLHttpRequest has become a de facto standard and is supported by most modern browsers. This broader support for XMLHttpRequest has led to the increased usage of the technology and the establishment of Ajax.

The XMLHttpRequest object is used to send asynchronous requests to the server. This object is created using JavaScript. Care must be taken when instantiating the XMLHttpRequest object as Internet Explorer implements the object as an ActiveX object while other browsers (Safari, Firefox and Opera) implement XMLHttpRequest as a native object. A standard way of creating the XMLHttpRequest object has been developed. Below is an example of this.

var req;
if (window.XMLHttpRequest) // Non-IE browsers
{
req = new XMLHttpRequest();
}
else if (window.ActiveXObject) // IE
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}

Wikipedia shows a list of the XMLHttpRequest methods and properties. The most used methods are open and send. The open method is typically called with asynchronous set to true, which is the default, however one may set this to false when performing user input validation. The send method is used to transmit the request to the server. In asynchronous mode the method returns control back to the client script immediately. The W3C provides an example of the XMLHttpRequest object being used.That example follows strict W3C implementation standards. It creates the XMLHttpRequest object as a native object and does not cater for Microsoft’s proprietary ActiveX implementation. It is then interesting to note that at the end of the XMLHttpRequest Object specification document, W3C gives special thanks to Microsoft who first implemented the XMLHttpRequest interface.

2.1. The Document Object Model

The W3C DOM was built on specifications from the Object Management Group. The W3C describes the W3C DOM as “A standard set of objects for representing HTML and XML documents, a standard model of how these objects can be combined, and a standard interface for accessing and manipulating them.”

The authors of Foundations of Ajax state “The DOM is an API for HTML and XML documents that provides a structural representation of the document and defines how the document structure is accessed through script”.

The W3C DOM object gives the script a handle on the document elements. These elements are often visualised as a tree structure. The W3C DOM is a language independent API and can be viewed here. The W3C introduces the DOM in phases, referred to as DOM levels.

2.1.3. DOM Levels

DOM Level 0 is a term used to describe the functionality supported by Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0. DOM Level 0 is not a W3C specification. In October 1998, DOM Level 1 introduced HTML 4.0 and XML 1.0. This specification enjoys a wide support base. DOM Level 2 was completed in November 2000. DOM Level 2 extended DOM Level 1. This was done by introducing Cascading Style Sheets (CSS) and XML namespaces. DOM Level 3 is currently under development. The DOM Level 3 specification is composed of the DOM3 Core, validation, events, XPath and the ‘Document Object Model Load and Save Level 3′ Specification.

As previously stated Ajax is not a W3C standard. W3C has published the ‘Document Object Model Load and Save Level 3′ Specification, also referred to as W3C DOM Level 3 “Load and Save”. This specification defines a platform and language neutral way for programs and scripts to dynamically load, modify and save the content of a DOM document with XML content. This specification was developed in an attempt to solve incompatibility problems with different browsers. The W3C DOM Level 3 “Load and Save” specification 1.0 was released in April 2004. According to Foundations of Ajax no browsers currently support this standard. If browsers had to implement this standard certain browser incompatibility issues would be eradicated. An example of a browser incompatibility issue is evident when instantiating the XMLHttpRequest object.

Index | Part 1 | Part 2 | Part 3 | Part 4 | Part 5

About these ads

6 thoughts on “Ajax Fundamentals – Part 1

  1. Pingback: Ajax Fundamentals - About & Index « Daryn’s Blog

  2. Pingback: Ajax Fundamentals - Part 2 « Daryn’s Blog

  3. Pingback: Ajax Fundamentals - Part 3 « Project Entropy

  4. Pingback: Introduction to Ajax Parts 1 - 3 « Rich Internet Applications

  5. Pingback: Ajax Fundamentals - Part 4 « Project Entropy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s