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
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Every organization is facing their own Digital Transformation as they attempt to stay ahead of the competition, or worse, just keep up. Each new opportunity, whether embracing machine learning, IoT, or a cloud migration, seems to bring new development, deployment, and management models. The results are more diverse and federated computing models than any time in our history.
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
The standardization of container runtimes and images has sparked the creation of an almost overwhelming number of new open source projects that build on and otherwise work with these specifications. Of course, there's Kubernetes, which orchestrates and manages collections of containers. It was one of the first and best-known examples of projects that make containers truly useful for production use. However, more recently, the container ecosystem has truly exploded. A service mesh like Istio addr...
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
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...