XML in the Browser: Submitting forms using AJAX

Both Google and Amazon have been pioneers in developing AJAX applications. Google's GMail, Suggest, and Google Maps all use AJAX in one way or another to make the Web user interface more like a desktop application.

The documentation for the request object is a little slim, and assumes a certain amount of knowledge of at least HTTP in order to get the most out of it. This article will attempt to lay out as many specifics about the use of XMLHTTPRequest as possible to enable you to use it to its full potential, with a focus on how to use it with forms.

The Basics

The request object (as we will try to call it from now on) is a special Javascript object that can be used in the same way that many such objects can be used. The only difference in implementation is in Microsoft Internet Explorer. In Explorer the request object is an Active X control. A simple example of how to deal with this difference is below.

var doc = null

   if (typeof window.ActiveXObject != 'undefined' )

   {

       doc = new ActiveXObject("Microsoft.XMLHTTP");

       doc.onreadystatechange = displayState;

   }

   else

   {

       doc = new XMLHttpRequest();

       doc.onload = displayState;

   }

If we are using IE, an instance of the Active X object is created and the onreadystatechange event is attached to it. If, however, it is just a plain old Javascript object, we create an instance of it and attach the onload event.

A function called displayState is called when the readystate changes or, in the case of the non-Active X object, the onload event is fired. Aside from these differences, everything is cross browser compatible. Except for one thing.