Data Binding and XMLHTTP

This month we conclude our series on Data Islands. Let me start by saying thank’s to all your comments and suggestions. Your feedback has helped me improve the content of this publication and I appreciate it. I hope I have met your requests. So…

Last month we looked at Data Islands and how to embed them in the browser. One drawback to any disconnected data is that it becomes stale relatively quickly. So this month we are going to to look at how to communicate with XML Web Services from the browser, and populate page elements with live data on the fly. Since people learn by doing, and everyone loves free code, I have included all the source in a zip file for you to download.

So lets start by saying there are an infinite number of applications for this technology, and the examples here are only to illustrate some of them. Let your skill and imagine dictate how you apply the technology to deliver more dynamic applications to your clients. This article illustrates following:

1. Communicate using MSXML.XMLHTTP

2. Bind forms and elements to a data island (single instance)

3. Bind a table to a data island (multiple instance)

4. XML Transforms in the browser (covered last month)

Communication with MSXML.XMLHTTP

I decided to use XMLHTTP for the illustrations, although the webservices.htc is available, the HTTP calls make for much clearer examples. I have chosen to illustrate the calls in an asynchronous manner to keep the impact on the user to a minimum. One drawback to this method is when complex soap types are used you have to manualy build a properly formatted soap message. For the sake of simplicity, I have created the Web Service Methods to take simple types as parameters, and return XML Documents. Heres how to make the HTTP callsView

There are two parts to making asynchronous calls with the object.

1. Establishing the connection and sending the data.

2. Creating a function for handling the return and attaching it to the objects onreadystatechange event.

//Create the object instance (Version 1 or 2 works for these examples)
objHTTP = new ActiveXObject("Microsoft.XMLHTTP"); 
//Set the method type GET|POST, the location of the web service, and the async value
objHTTP.open("METHOD","Service Location/Method Name",blAsync); 
//It is imprtant to define this here so your data is sent correctly
objHTTP.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//Tell the object what function to call on return 
objHTTP.onreadystatechange=Function;
//Send the form data off to the service
objHTTP.send("prm=value");

Binding Data To Forms And Tables

To bind a data island to a data source you specify the values for the datasrc and datafld attributes of the HTML element. When an island with multiple nodes is bound to a table, the nodes create multiple rows and cells. When binding to a form you have two options. Setting the datasrc at the form level for all the elements, of specifying the datasrc for each of the elements. The advantage to specifying the data source at the element level is that there are no “clicks” when you send the data, making the application feel more like a desktop app.

Notice the use of the # sign to indicate that the data source is a data island.

<table datasrc ="#Island Name">
    <tr> 
        <td><span datafld="name"></span></td>
    </tr >
    <tr >
        <td><span datafld="field name"></span></td>....

<form>
    <input type="text" datasrc="#Island Name" datafld="field name"> ....

Once bound to the data source and data fields, any changes in the underlying data are immediately reflected in the bound items.

View the sample

That’s a wrap for this month folks. Please, I urge you to leave feedback. Your input helps us improve this information resource.

To download the source for the sample page, as well as the web services and SQL code, Right Click on the source link and choose save target as. SOURCE

Click here to sign up for FREE Tech. newsletters from murdok!

Alan Hyneman has been working with and using computers in numerous applications for over 20 years. His experiences range from Graphic Design and Desktop Publishing, through developing enterprise level back end engines utilizing SQL, ASP, VB, XML, XSLT, and C++. He holds Microsoft’s MCSD certification, Microsoft’s highest certification for software developers. He is available on a consultant or contract basis and is always ready to meet the needs of clients.