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

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
Whenever a new technology hits the high points of hype, everyone starts talking about it like it will solve all their business problems. Blockchain is one of those technologies. According to Gartner's latest report on the hype cycle of emerging technologies, blockchain has just passed the peak of their hype cycle curve. If you read the news articles about it, one would think it has taken over the technology world. No disruptive technology is without its challenges and potential impediments t...
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.
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...
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...
If a machine can invent, does this mean the end of the patent system as we know it? The patent system, both in the US and Europe, allows companies to protect their inventions and helps foster innovation. However, Artificial Intelligence (AI) could be set to disrupt the patent system as we know it. This talk will examine how AI may change the patent landscape in the years to come. Furthermore, ways in which companies can best protect their AI related inventions will be examined from both a US and...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...
Bill Schmarzo, Tech Chair of "Big Data | Analytics" of upcoming CloudEXPO | DXWorldEXPO New York (November 12-13, 2018, New York City) today announced the outline and schedule of the track. "The track has been designed in experience/degree order," said Schmarzo. "So, that folks who attend the entire track can leave the conference with some of the skills necessary to get their work done when they get back to their offices. It actually ties back to some work that I'm doing at the University of San...
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...
Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: Driving Business Strategies with Data Science," is responsible for setting the strategy and defining the Big Data service offerings and capabilities for EMC Global Services Big Data Practice. As the CTO for the Big Data Practice, he is responsible for working with organizations to help them identify where and how to start their big data journeys. He's written several white papers, is an avid blogge...
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...