Industrial IoT Authors: Pat Romanski, William Schmarzo, Elizabeth White, Stackify Blog, Yeshim Deniz

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
Here are the Top 20 Twitter Influencers of the month as determined by the Kcore algorithm, in a range of current topics of interest from #IoT to #DeepLearning. To run a real-time search of a given term in our website and see the current top influencers, click on the topic name. Among the top 20 IoT influencers, ThingsEXPO ranked #14 and CloudEXPO ranked #17.
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
According to Forrester Research, every business will become either a digital predator or digital prey by 2020. To avoid demise, organizations must rapidly create new sources of value in their end-to-end customer experiences. True digital predators also must break down information and process silos and extend digital transformation initiatives to empower employees with the digital resources needed to win, serve, and retain customers.
In his keynote at 18th Cloud Expo, Andrew Keys, Co-Founder of ConsenSys Enterprise, provided an overview of the evolution of the Internet and the Database and the future of their combination – the Blockchain. 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 settl...
Contextual Analytics of various threat data provides a deeper understanding of a given threat and enables identification of unknown threat vectors. In his session at @ThingsExpo, David Dufour, Head of Security Architecture, IoT, Webroot, Inc., discussed how through the use of Big Data analytics and deep data correlation across different threat types, it is possible to gain a better understanding of where, how and to what level of danger a malicious actor poses to an organization, and to determin...
@CloudEXPO and @ExpoDX, two of the most influential technology events in the world, have hosted hundreds of sponsors and exhibitors since our launch 10 years ago. @CloudEXPO and @ExpoDX New York and Silicon Valley provide a full year of face-to-face marketing opportunities for your company. Each sponsorship and exhibit package comes with pre and post-show marketing programs. By sponsoring and exhibiting in New York and Silicon Valley, you reach a full complement of decision makers and buyers in ...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
LogRocket helps product teams develop better experiences for users by recording videos of user sessions with logs and network data. It identifies UX problems and reveals the root cause of every bug. LogRocket presents impactful errors on a website, and how to reproduce it. With LogRocket, users can replay problems.
Data Theorem is a leading provider of modern application security. Its core mission is to analyze and secure any modern application anytime, anywhere. The Data Theorem Analyzer Engine continuously scans APIs and mobile applications in search of security flaws and data privacy gaps. Data Theorem products help organizations build safer applications that maximize data security and brand protection. The company has detected more than 300 million application eavesdropping incidents and currently secu...
Rafay enables developers to automate the distribution, operations, cross-region scaling and lifecycle management of containerized microservices across public and private clouds, and service provider networks. Rafay's platform is built around foundational elements that together deliver an optimal abstraction layer across disparate infrastructure, making it easy for developers to scale and operate applications across any number of locations or regions. Consumed as a service, Rafay's platform elimi...