Welcome!

Open Source Cloud Authors: Liz McMillan, Pat Romanski, Yeshim Deniz, Elizabeth White, Zakia Bouachraoui

Related Topics: Open Source Cloud, Machine Learning

Open Source Cloud: Article

Cross-Browser Client-Side AJAX

Other than using the XMLHTTP request object, how does one go about writing an AJAX application?

I'd like to take a moment before continuing to point out the onreadystatechange property. It's there that we provide a handler for when the XMLHTTP request object's readystate changes. Or, in other words, the server did something. The possible server responses, along with their meanings are described in Table 2.

The onreadystatechange property and ready states are only used for asynchronous requests. Since we're busy people and this is supposed to be an article about AJAX we'll concentrate on the asynchronous request as opposed to a synchronous request. The required code is shown in Listing 1 with the results in Figure 1.

Just in case you were wondering, there are only two differences between an asynchronous request and a synchronous request. The first is that the true is false. And the second is that an onreadystatechange event handler isn't needed. The browser will wait for the server's response.

All right, for argument's sake let's say that the onreadystatechange event handler has the server's response and that that the ready state is complete. It doesn't mean that we're done, yes, the information is on the browser, but unless the user has some kind of weird mutant power enabling him to see the invisible, the information isn't in a very useful format. Sitting in an object hidden from view, yeah, that's helpful. Fortunately there are, however, a number of options available that can make the information a wee bit more user friendly.

However, before displaying anything on the browser it might be a good idea to make sure it's what we're expecting. After all, it's within the realm of possibility that we don't get a good response like this one:

<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
   <soap:Body>
     <getItemsResponse xmlns="http://tempuri.org/">
       <getItemsResult>xml</getItemsResult>
     </getItemsResponse>
    </soap:Body>
   </soap:Envelope>

We could, in fact, get a SOAP fault like this:

<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
   <soap:Body>
     <soap:Fault>
       <faultcode>soap:MustUnderstand</faultcode>
       <faultstring>Mandatory Header error.</faultstring>
       <faultactor>http://localhost/AJAX4/chapter4.asmx</faultactor>
<detail>Web Service coffee break.</detail>
     </soap:Fault>
    </soap:Body>
   </soap:Envelope>

Again for argument's sake let's assume that the response was successful, because handling a SOAP fault actually depends on what we were attempting to accomplish in the first place. With AJAX it's kind of traditional when handling a successful response from the server to show something on the user's browser, so that's what we'll do. Which leads me to the question how?

Well, first it's necessary to extract the part of the XMLHTTP request object's response that we're interested it. While there are several ways to do this extraction ranging from applying a regular expression to the text response to selecting individual nodes from the XML response, I'll use the XML response. Hey, why not, the "X" in AJAX stands for XML, might as well use it, and leave the text response for debugging with alerts.

If you haven't noticed yet, when creating an AJAX application from scratch there always seems to be just one more thing to do. In this case it's display the results in the Web browser, which depending on the result can be done in several ways. For instance, the innerHTML property is a real good possibility. Basically it would look something like this:

document.getElementById('tagid').innerHTML = whatever;

Another possibility is to display the results using the HTML Document Object Model's appendChild method like this:

document.getElementById('tagid').appendChild(whatever);

Just in case you're wondering, whatever is in the examples above, it's essentially whatever you'd like it to be. It could be text, as in the value of a particular XML node, or it could be XHTML that was created on the server. I've even seen the XMLHTTP request object's responseText property used so that regular, not well formed, HTML could be used. While this might sound odd it's a good way to get a little extra mileage out of existing applications.

However, I'm personally fond of living dangerously. Yes, I'm one of those developers who's been accused of dabbling in the dark arts by some other developers; yes, I use XSLT on the client. Before running off to hide from the scary man, let me explain that if a Web browser supports the XML the odds are close to 100% that it also supports XSLT. Interested?

AJAX and the Dark Arts
Good, but I should warn you that certain things are easier in one browser than the other. For example, creating an XSLT processor is one step in Firefox, while it's multi-step in Internet Explorer; basically anything to do with XML is different from browser to browser. One of these differences is something called XML data islands, introduced in Internet Explorer 5.0, it's a way of embedding XML in the body of an HTML document. I've decided to use this technique as well as demonstrate that the XMLHTTP request object can be used without SOAP to 'GET' a file directly from the Web server. The end result of this endeavor is shown in Listing 2 and Figure 2, look it over and I'll be right here to explain some oddities.

I'd like to point out several things about Listing 2. First, the Cascading Style Sheet, whose sole purpose it to insure that the XML data island doesn't display in the browser. Another item is how the serialization and de-serialization of XML is handled by the individual Web browsers. Working around these differences is often enough to push one over the edge, but once the code exists it's merely a matter of cloning it as often as needed. Although, being a lazy, er, efficient type, I usually create JavaScript classes for this kind of thing. (see Figure 3)

Conclusion
What I've shown here is just a taste of some of the power and problems that one encounters when developing an AJAX application. And while developing the first application is often time-consuming, once these techniques have been mastered subsequent applications come a lot easier than the first. Yes, hard work is its own reward, although having a hot buzzword on the resume is good. Come to think of it the paycheck is nice too.

More Stories By Edmond Woychowsky

Edmond Woychowsky is the author of Prentice Hall's AJAX: Creating Web Pages with Asynchronous JavaScript and XML (to publish August 2006). A graduate of Middlesex Country College and Penn State, Edmond Woychowsky began his professional life at Bell Labs as a dinosaur writing recursive assembly language programs for use in their DOSS order entry system. Throughout his career Ed has worked in the banking, insurance, pharmaceutical and manufacturing industries slowly sprouting feathers and evolving into a web developer. Best known for his often unique articles on the TechRepublic web site as well as his ability to explain how Muenchian grouping works in small words. Currently he can be found working in New Jersey as a consultant, applying both AJAX and XSLT to problems in often bizarre ways and looking forward to his next meal.

Comments (10) View Comments

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.


Most Recent Comments
j j 09/30/06 10:45:41 AM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

j j 09/29/06 01:30:15 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

AJAXWorld News Desk 09/29/06 12:36:33 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

n d 08/27/06 12:20:48 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

n d 08/27/06 12:20:40 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

AJAXWorld News Desk 08/25/06 01:59:15 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

AJAXWorld News Desk 08/25/06 01:58:57 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

AJAXWorld News Desk 08/10/06 01:10:16 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

AJAXWorld News Desk 08/09/06 07:35:49 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

AJAXWorld News Desk 08/04/06 05:20:54 PM EDT

Everyone has one or two words or phrases that people associate with them. For example, I always think of my friend Rob eating squid when I hear the words 'What do you mean it's not chicken?' Just thinking about those words is enough to transport me through the years to that moment. And the look on his face still makes me smile.

IoT & Smart Cities Stories
In this Women in Technology Power Panel at 15th Cloud Expo, moderated by Anne Plese, Senior Consultant, Cloud Product Marketing at Verizon Enterprise, Esmeralda Swartz, CMO at MetraTech; Evelyn de Souza, Data Privacy and Compliance Strategy Leader at Cisco Systems; Seema Jethani, Director of Product Management at Basho Technologies; Victoria Livschitz, CEO of Qubell Inc.; Anne Hungate, Senior Director of Software Quality at DIRECTV, discussed what path they took to find their spot within the tec...
To Really Work for Enterprises, MultiCloud Adoption Requires Far Better and Inclusive Cloud Monitoring and Cost Management … But How? Overwhelmingly, even as enterprises have adopted cloud computing and are expanding to multi-cloud computing, IT leaders remain concerned about how to monitor, manage and control costs across hybrid and multi-cloud deployments. It’s clear that traditional IT monitoring and management approaches, designed after all for on-premises data centers, are falling short in ...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
Discussions of cloud computing have evolved in recent years from a focus on specific types of cloud, to a world of hybrid cloud, and to a world dominated by the APIs that make today's multi-cloud environments and hybrid clouds possible. In this Power Panel at 17th Cloud Expo, moderated by Conference Chair Roger Strukhoff, panelists addressed the importance of customers being able to use the specific technologies they need, through environments and ecosystems that expose their APIs to make true ...
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
We are seeing a major migration of enterprises applications to the cloud. As cloud and business use of real time applications accelerate, legacy networks are no longer able to architecturally support cloud adoption and deliver the performance and security required by highly distributed enterprises. These outdated solutions have become more costly and complicated to implement, install, manage, and maintain.SD-WAN offers unlimited capabilities for accessing the benefits of the cloud and Internet. ...
In an era of historic innovation fueled by unprecedented access to data and technology, the low cost and risk of entering new markets has leveled the playing field for business. Today, any ambitious innovator can easily introduce a new application or product that can reinvent business models and transform the client experience. In their Day 2 Keynote at 19th Cloud Expo, Mercer Rowe, IBM Vice President of Strategic Alliances, and Raejeanne Skillern, Intel Vice President of Data Center Group and G...
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
DXWorldEXPO LLC announced today that "IoT Now" was named media sponsor of CloudEXPO | DXWorldEXPO 2018 New York, which will take place on November 11-13, 2018 in New York City, NY. IoT Now explores the evolving opportunities and challenges facing CSPs, and it passes on some lessons learned from those who have taken the first steps in next-gen IoT services.
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...