Industrial IoT Authors: Elizabeth White, Stackify Blog, Yeshim Deniz, SmartBear Blog, Liz McMillan

Related Topics: Industrial IoT

Industrial IoT: Article

XML Integration Features IN IE5.x

XML Integration Features IN IE5.x

Internet Explorer 5.x has several XML integration features that can streamline development of corporate intranets and other enterprise applications when it's the browser of choice. Complementary technologies, XML data islands and XML data binding, allow for more efficient code while offloading some of the more mundane processing from the Web server to the client. The third feature, XMLHTTP post, allows IE 5.x to easily post XML back to the Web server.

What is an XML data island? It's simply XML data that's actually part of the HTML page. By using the XML element, XML data can either be included in the HTML page between an <XML></XML> block, commonly called inline XML, or it can be referenced via the XML element's SRC attribute.

<XML id="xmlFinal">
<?xml version="1.0" ?>

By reference
<XML ID="xmlFinal" SRC="teams.xml">

XML data contained in these data islands can then be bound to HTML elements on the page via the XML Data Source Object (DSO). For our purposes we'll call it XML data binding. The process of binding XML data to specific elements is accomplished by specifying a DATASRC and/or DATAFLD attribute for the bound HTML element. The DATASRC attribute corresponds to the ID value of the XML data island with a # prepended to it: in this case DATASRC="#xmlFinal". The DATAFLD attribute value refers to the actual XML element or attribute to be bound - for example, DATAFLD="team".

A Simple Example
The best way to illustrate the basic principles is with an example. We'll use the XML in Listing 1 as the source of our data island. This data represents the four teams that competed in the 2001 Men's NCAA College Basketball Championship in Minneapolis. Listing 2 contains the complete source for the example.

The first step is to place an XML tag in the HTML source whose SRC attribute value points to finalfour.xml. This is accomplished with <xml id="finalfour" src="finalfour.xml"></xml>. When the page is rendered on the client, the XML data in Listing 1 will be pulled from the server and become part of the client-side document object. You can actually navigate to the XML tag via the HTML DOM's document.all collection. It's treated the same as any other node in the document tree.

Second, the data must be bound to the appropriate HTML element. In this case each element is bound inside a TD element of a four-columned table.

<td><div datafld="region"></div></td>
<td><div datafld="school"></div></td>
<td><div datafld="nickname"></div></td>
<td><div datafld=

The result is the page shown in Figure 1. Notice how in this example the bound elements are enclosed in DIV tags. This is because the TD element doesn't support data binding. Also, the syntax for binding to attributes in the XML data island is the same as that for binding to elements. No special syntax is required to bind the region attribute as opposed to <school>. The exception to this is if an element and one of its attributes share the same name. Here the syntax for binding to the attribute would be to prepend an ! to the attribute name. For example:

<td><div datafld="!region"></div></td>

Real-World Example
In the previous example a client- or server-side xsl transformation would have provided us with a cleaner and more robust mechanism for achieving the same result. This holds true for most read-only applications that utilize XML-based data. Where IE 5.x's intrinsic support for data islands and XML data binding excels is in building real-world applications. In the real world users don't just look at data, they interact with it. They make changes and crunch numbers, and then want to persist those changes to some back-end data store.

The traditional way to handle such activity is to post an HTML form to an Active Server Page or Java servlet. The form variables, by way of a request object, are then used to set the properties of or to call methods on server-side COM+ components or JavaBeans. While this works well, it can result in overly complex code that's prone to mistakes. The problem is that the physical representation of the data is different at each level. On the server it may be an ADO or JDBC recordset, an array, or an XML stream. It's then coerced into HTML for its trip to the client. When the time comes to send the data back to the server, it comes in the form of HTTP post variables, at which point it's once again transformed to its original format.

This constant shifting of formats is enough to give even the most well-grounded data an identity crisis. The point, of course, is that the underlying data, whether it resides on the client or the server, is the same, so why should it be necessary to go through all these gyrations? Well, if you're using or beginning to use XML and have the luxury of targeting IE 5.x, it doesn't have to be this way.

With IE 5.x, XML data islands allow data to be represented the same on both client and server. In addition, XML data binding allows this data to integrate seamlessly with the presentation layer in a way that doesn't require that the data be manually mapped to HTML elements either via client-side script or server-side code. To illustrate this point we'll build on the preceding example.

Interactive Example
Listing 3 expands on the simple example by including another table in which the XML is bound to editable HTML INPUT elements. Both tables are now bound to the same XML data island but with a somewhat different presentation, as shown in Figure 2. Binding to INPUT elements is no different from binding to read-only HTML elements:

<td><div datafld="region"></td>
<td><input type="text" datafld=
<td><input type="text" datafld=
<td><input type="text" datafld=

When updates are made to fields in the updatable table, the changes are immediately reflected in the read-only table. This is the beauty of XML data binding. Without a single line of code, changes to bound elements are propagated back to the underlying data store (in this case the finalfour XML data island) and reflected in any other bound elements. A lot is going on under the hood to implement this behavior, of course, but what's significant is that it's been abstracted to the point where you as the programmer can concentrate on the business solution rather than custom event handlers and data mapping.

Validation and Edit Checking
Applying various edit-checking and validation routines to the bound data is really no different than with traditional browser-based applications. One of the niceties of the XML data island approach is that we also have a window into the underlying data source that's easy to work with and navigate. If we take the example above and add an "onchange" event handler, we can see just how easy it actually is. First we add the event handler:

<script for="txtSchool" event=
var dupeSchool = checkForDupe
event.cancelBubble = true;
alert("School is already
retVal = false;
} else {
retVal = true;
return retVal;

This event will fire anytime the school value is updated. This event handler calls a JavaScript function called checkForDupe that checks to make sure we don't have duplicate entries. The checkForDupe code is as follows:

function checkForDupe(teamName){

var xPath = "//team[school =
'" + teamName + "']";
schoolNode = finalfour.
documentElement. _
dupeSchool = (schoolNode != null);
return dupeSchool;

The most important thing to note here is the ability to work with the finalfour XML data island as a full-fledged MSXML DOM object that can be walked, manipulated, and interrogated. Here the updated txtSchool value is used to build an XPath expression that can be passed as an argument to the selectSingleNode method. If we were to change Duke to Uconn, the resultant XPath expression in line 1 of checkForDupe would be //team[school = 'Uconn']. Executing finalfour.documentElement.selectSingleNode(XPath); would return null since no nodes matching that XPath expression would be found. If a node is found, checkForDupes returns true and the cursor remains on the current txtSchool INPUT element.

Deleting and Adding Content
As with most interactive applications, a mechanism for adding and deleting content is also required. Although this article won't go into detail about how to implement this functionality, the combination of MSXML DOM manipulation on the client along with XPath support provides the framework for doing these sorts of things in a variety of ways.

Posting Content Back to the Server
Now that changes have been made to the XML data island, the next logical question is how these changes are propagated back to the server so they can be saved to some persistent data store. This can be done in several ways, the most obvious being to stuff the contents of finalfour into a hidden form variable - but there's a much more elegant way. The version of MSXML that ships with IE 5.x includes what's called the XMLHttpRequest object. This basically allows for the sending of generic HTTP requests to a Web server in either a synchronous or asynchronous manner. In our example we're interested mainly in sending XML and receiving a response back in the form of XML. If you're thinking Web services at this point, that's good, because the underlying technology used here forms the basis for Web services. We've got XML on the wire (less SOAP headers and tags) that will be processed by some ASP or Java servlet that will in turn return a status encoded in XML. To accomplish this, a button will be added to the example above with an onclick event handler that calls the following routine:

function PostXML(){
var xmlhttp = new ActiveXObject
xmlhttp.open("POST", _
testHttpPost.asp", false);

The first line creates a new instance of the XmlHttpRequest object. It uses the standard syntax for instantiating client-side COM objects in Microsoft IE. The programmatic ID in this case is Microsoft.XMLHTTP. The Open method of the XmlHttpRequest object takes up to five arguments. The first is the request type, which usually will be either POST or GET. The second, the URI, can be either an absolute address or a relative one. The third argument is the Async indicator. The default here is true, which simply means that control will be returned to the caller immediately and the user must code an appropriate event handler. We set this indicator to false because we want to wait for a response before continuing.

It's also necessary to set the content-type to TEXT/XML when posting so the receiving ASP page or servlet knows how to parse the content. Finally, the send method is used to POST the finalfour XML to the URL specified in the Open method. Because the Async indicator was set to false in the Open method, this call blocks until a response is sent back by testHttpPost.asp. The contents of testHttpPost.asp are shown in Listing 4. In this case testHttpPost.asp simply sends back a status message of <status>OK</status> that's displayed in an alert dialog.

The combination of XML data islands and XML data binding, and the ability to post XML to the Web server with the XmlHttpRequest object provide a powerful and robust mechanism for writing intranet and IE 5.x-centric Web applications. Not only can it reduce coding time and ease maintenance tasks, but it also provides a means for offloading work from the Web server to those not-so-thin clients that live on corporate desktops everywhere.

More Stories By Mike Morris

Mike Morris is cofounder of Developer Box LLC, a software development and consulting company located in Middletown, CT. He has been developing enterprise solutions for over 12 years on a variety of platforms.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

IoT & Smart Cities Stories
Early Bird Registration Discount Expires on August 31, 2018 Conference Registration Link ▸ HERE. Pick from all 200 sessions in all 10 tracks, plus 22 Keynotes & General Sessions! Lunch is served two days. EXPIRES AUGUST 31, 2018. Ticket prices: ($1,295-Aug 31) ($1,495-Oct 31) ($1,995-Nov 12) ($2,500-Walk-in)
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
Nicolas Fierro is CEO of MIMIR Blockchain Solutions. He is a programmer, technologist, and operations dev who has worked with Ethereum and blockchain since 2014. His knowledge in blockchain dates to when he performed dev ops services to the Ethereum Foundation as one the privileged few developers to work with the original core team in Switzerland.
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
The challenges of aggregating data from consumer-oriented devices, such as wearable technologies and smart thermostats, are fairly well-understood. However, there are a new set of challenges for IoT devices that generate megabytes or gigabytes of data per second. Certainly, the infrastructure will have to change, as those volumes of data will likely overwhelm the available bandwidth for aggregating the data into a central repository. Ochandarena discusses a whole new way to think about your next...
CloudEXPO | DevOpsSUMMIT | DXWorldEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
Dynatrace is an application performance management software company with products for the information technology departments and digital business owners of medium and large businesses. Building the Future of Monitoring with Artificial Intelligence. Today we can collect lots and lots of performance data. We build beautiful dashboards and even have fancy query languages to access and transform the data. Still performance data is a secret language only a couple of people understand. The more busine...
All in Mobile is a place where we continually maximize their impact by fostering understanding, empathy, insights, creativity and joy. They believe that a truly useful and desirable mobile app doesn't need the brightest idea or the most advanced technology. A great product begins with understanding people. It's easy to think that customers will love your app, but can you justify it? They make sure your final app is something that users truly want and need. The only way to do this is by ...
DXWorldEXPO LLC announced today that Big Data Federation to Exhibit at the 22nd International CloudEXPO, colocated with DevOpsSUMMIT and DXWorldEXPO, November 12-13, 2018 in New York City. Big Data Federation, Inc. develops and applies artificial intelligence to predict financial and economic events that matter. The company uncovers patterns and precise drivers of performance and outcomes with the aid of machine-learning algorithms, big data, and fundamental analysis. Their products are deployed...