IE extends its functionality by allowing developers to use
safe ActiveX components within Web pages. One development in the stateless
connection arena is the XMLHTTP component.

By using the XMLHTTP component, you can transfer data to the
server and receive data from the server without navigating from the current Web
page. This functionality is important because it helps alleviate the pains of
stateless connections. It can also speed up the process by eliminating the need
to download redundant HTML.

Mozilla’s response to this was to
create its own inherent XML proxy: the XMLHttpRequest
class. For the most part, the XMLHttpRequest object
behaves like the XMLHTTP component. This means you can use a lot of the same
Help information as the XMLHTTP component. The methods and properties are
similar; however, all the methods and properties begin with a lowercase letter,
and there isn’t support for some properties.

Here’s a simple example that uses eXtensible
Binding Language (XBL) to bind a behavior to an <INPUT> element to update
the XML data island. Then, the data goes to the server for processing. Listing A contains the code for xml_http.asp.
Listing B contains the code for link_data.xml.

The xml_http.asp file creates an
XML data island with one important node: link_data.
Also, the rendering of this HTML creates a textbox and button that will be used
to create the event to send the XML data to the server.

IE allows you to embed XML data islands and bind HTML
elements to the underlying data within that data island. Mozilla
relies on XBL to create behaviors for elements. Using XBL, you can create a
behavior for the <INPUT> element so that when the onChange
event occurs, the “bound” XML node value can be updated. The “linkedData” style class informs Mozilla
that the link_data.xml file should be used to create
the binding. This class is utilized in the <INPUT TYPE=”text”…>
element.

If you examine the link_data.xml
code, you’ll notice that the onchange event handler
simply grabs the link_data node in the XML data
island and updates the text node value. This is a very simple approach to this
solution; it just updates the data if the data in the textbox changes. It isn’t
a two-way binding mechanism because, if the node value changes, the textbox
wouldn’t reflect the change.

When the user clicks on the Test button, the magic happens.
A new XMLHttpRequest object is created to send the
XML data to the server. Then, just as the XMLHTTP component works in IE, you
open the connection to your remote page using the open()
method. In this example, I add a query string to the xml_http.asp
page so I can use the same page to handle the XML transmission. Using the send() method, I pass the xmlData
data island’s innerHTML. (In IE, this is the same as
specifying the xml property of the xmlData data
island.)

When the xml_http.asp page is
loaded, it checks to see if the “action” parameter was passed to the
page and if that parameter equals “update.” If this is the case—which
it is when we make the XMLHttpRequest request—it
creates a DOMDocument component, loads the XML from
the Request object, and returns the xml of the DOMDocument.
This is for example and doesn’t serve any purpose other than to show that it
works. The Request object exposes the IStream
interface, which allows the DOMDocument to load() the xml directly from the Request object. (In another
language, you would use the POST data from the HTTP request.)

This is a very simple example to show off Mozilla’s XML capabilities. One of the drawbacks to doing
XML with Mozilla is that there’s limited
documentation. As mentioned earlier, for the most part, you can utilize Microsoft’s
documentation on the XMLHTTP component for the XMLHttpRequest
object.

Keep your developer skills sharp by automatically signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.