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.