The DOM

The last of the major components that make Ajax work is the DOM or Document Object Model. The DOM is the weak link in the process-not because it fails, but because each browser uses slightly different objects to make up the DOM. This means the methods and properties exposed by those objects are different as well. Adding Ajax functionality that works cross browser usually means making one of four choices:

• q Ignore the browsers you're not interested in. Many developers target a particular browser and version, usually based on their Web traffic. This solution makes most sense for internal applications that allow you to control the client software. However, for public-facing applications, this choice can have a nasty side effect of alienating potential or current customers. Although supporting only one (or a few) browsers reduces your test needs and increases the chances of success, it also sends the message to users of other browsers, "We don't care about you." You should at least strive to provide for users of other browsers. People using your selected browser(s) can have the Ajax experience, whereas other users receive a Web page that requires round-tripping (but is still functional).

• q Use only a common subset of functionality that is exposed by all target browsers. By limiting your use of browser-specific features, you increase your chances of success at the expense of adding functionality that may be easier or richer in some browsers. This is the safe option. It does require a fair bit of discipline, however, because you must remember what features work across all browsers and limit yourself to use only those features. Usually the restrictions make this option quite difficult.

• q Degrade appropriately. This is one of the more common solutions. It can also be described as, "Keep trying until something works." Using this technique, you first try the most common solution, perhaps attempting to retrieve a particular object. If that fails, you then try the next most common solution. This continues until you either run out of possibilities or you run out of options. For example, a common need is to locate a field in a form based on its ID. Internet Explorer exposes a document.all collection, which is non-standard. Other browsers may or may not support this collection, although current versions of Opera and Firefox (but not Safari) do. If you use a feature such as this, you should check the returned object. If it is null, you should use another method to retrieve the object.

• q Have your framework treat all browsers the same. This is a curious option, but it can be quite appealing. The code wrapping the DOM can expose methods making all selected browsers look the same. That is, you create DOM methods where the underlying browser doesn't support them. Microsoft's AJAX Extensions uses this technique to provide all browsers with a DOM similar to Internet Explorer.

The end result, however, is that unless you choose to ignore certain browsers, you should test in a variety of browsers and, preferably, in multiple versions of those browsers before releasing any Ajax application. If you have an existing Web application, you can use your Web server log files to identify which browsers are commonly used for your site to determine which ones you should support.

Objects in the DOM

The following table shows some of the major objects provided by the DOM. As the name DOM implies, the document is the only object described by the W3C standard on the DOM; however, the other objects are provided by most modern browsers.

Open table as spreadsheet

Object	Description
document	Contains methods and properties related to the document (or page) currently open in the browser. You use this object to retrieve the elements of the page.
location	Contains methods and properties related to the current URL. The main use here is to send the user to another page, but you can also extract portions of the URL as needed.
navigator	Contains methods and properties related to the browser. This information can be useful in querying the capabilities of the browser.
window	Contains methods and properties related to the browser window. This is typically used to resize the browser or change the visibility of elements such as status bars.

Of the objects in the previous table, the most important or, at least, the most frequently used is the document object. This object enables you to retrieve, process, or change the contents of the current document. The total number of collections and child objects of this object are staggering: You could literally write a book about them (there so are many). A certain subset of these child objects and methods are used most frequently by developers. These objects and methods enable navigation through the items on the page, allow changes to their properties, and permit the addition of new items. Just a few of the child objects of document are listed in the following table.

Open table as spreadsheet

Object	Discussion
all[]	This child collection is only available with Internet Explorer and is not part of the W3C standard. Still, if all your clients are using Internet Explorer, it can be a handy shortcut. This collection contains all the important items for a Web page: images, links, stylesheets, and forms. The all[] collection can be used to retrieve individual items or iterate over the collection, looking for items to process.
forms[]	A collection of all the forms on the Web page. This is typically used to locate form elements, such as text fields, for processing.
documentElement	The root node of the document. This node is used to further drill down into the document structure.
body	Represents the content of the body of the document.

The following table discusses some of the important methods of document.

Open table as spreadsheet

Method	Discussion
createElement(tagName)	Creates a new element and adds it to the current document.
getElementById	This is the main method you work with when using Ajax. This method returns the selected element.
getElementsByTagName	This common method returns all elements of a given type. Typically, this is used as the input into a loop for further processing.
write	Writes content to the current document. Note that this content does not appear if the user looks at the source of the page. Therefore, many sites use this method to write information that should remain somewhat protected. This is not a foolproof method, however, because any use of a HTTP monitoring application or JavaScript debugger shows the content.

In addition to the objects listed in the preceding table and the document object, a number of other objects exist in the DOM. They relate to the objects that normally occur in HTML forms and on pages. For example, a button object relates to the buttons you can add to HTML forms.

Events in the DOM

In addition to supporting methods and properties, many objects in the DOM also support events. You can connect your code to react to these events using the syntax:

      object.eventHandlerName = JavaScript_function; 

Event handlers in the DOM can be identified by names that start with on. Using them is similar to the onrequestchange you saw earlier with the XMLHttpRequest object. You assign a JavaScript function to the event handler. When the event occurs, the code in your method is executed. For example, use the following code to trap the button.onClick event that occurs when the button is clicked:

      button.onclick=someJSFunction; 

A possible problem with the preceding syntax is that it removes any previous handler that may have been set on the onclick event handler. Because of this, you should use the syntax:

      // Internet Explorer      button.attachEvent('click',      // DOM compliant browsers      Button.addEventListener('click', 

The previous form adds the function as a handler for the onclick method, but does this in addition to any existing handlers. This means that your trapping the event does not break any other code that may already be listening to the event.