Welcome!

Open Source Cloud Authors: Vaibhaw Pandey, Stackify Blog, John Walsh, Liz McMillan, Pat Romanski

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.

@ThingsExpo Stories
Large industrial manufacturing organizations are adopting the agile principles of cloud software companies. The industrial manufacturing development process has not scaled over time. Now that design CAD teams are geographically distributed, centralizing their work is key. With large multi-gigabyte projects, outdated tools have stifled industrial team agility, time-to-market milestones, and impacted P&L stakeholders.
"Cloud Academy is an enterprise training platform for the cloud, specifically public clouds. We offer guided learning experiences on AWS, Azure, Google Cloud and all the surrounding methodologies and technologies that you need to know and your teams need to know in order to leverage the full benefits of the cloud," explained Alex Brower, VP of Marketing at Cloud Academy, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clar...
Gemini is Yahoo’s native and search advertising platform. To ensure the quality of a complex distributed system that spans multiple products and components and across various desktop websites and mobile app and web experiences – both Yahoo owned and operated and third-party syndication (supply), with complex interaction with more than a billion users and numerous advertisers globally (demand) – it becomes imperative to automate a set of end-to-end tests 24x7 to detect bugs and regression. In th...
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
"MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
"IBM is really all in on blockchain. We take a look at sort of the history of blockchain ledger technologies. It started out with bitcoin, Ethereum, and IBM evaluated these particular blockchain technologies and found they were anonymous and permissionless and that many companies were looking for permissioned blockchain," stated René Bostic, Technical VP of the IBM Cloud Unit in North America, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Conventi...
SYS-CON Events announced today that Telecom Reseller has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5-7, 2018, at the Javits Center in New York, NY. Telecom Reseller reports on Unified Communications, UCaaS, BPaaS for enterprise and SMBs. They report extensively on both customer premises based solutions such as IP-PBX as well as cloud based and hosted platforms.
"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.
Coca-Cola’s Google powered digital signage system lays the groundwork for a more valuable connection between Coke and its customers. Digital signs pair software with high-resolution displays so that a message can be changed instantly based on what the operator wants to communicate or sell. In their Day 3 Keynote at 21st Cloud Expo, Greg Chambers, Global Group Director, Digital Innovation, Coca-Cola, and Vidya Nagarajan, a Senior Product Manager at Google, discussed how from store operations and ...
In his session at 21st Cloud Expo, Carl J. Levine, Senior Technical Evangelist for NS1, will objectively discuss how DNS is used to solve Digital Transformation challenges in large SaaS applications, CDNs, AdTech platforms, and other demanding use cases. Carl J. Levine is the Senior Technical Evangelist for NS1. A veteran of the Internet Infrastructure space, he has over a decade of experience with startups, networking protocols and Internet infrastructure, combined with the unique ability to it...
It is of utmost importance for the future success of WebRTC to ensure that interoperability is operational between web browsers and any WebRTC-compliant client. To be guaranteed as operational and effective, interoperability must be tested extensively by establishing WebRTC data and media connections between different web browsers running on different devices and operating systems. In his session at WebRTC Summit at @ThingsExpo, Dr. Alex Gouaillard, CEO and Founder of CoSMo Software, presented ...
"There's plenty of bandwidth out there but it's never in the right place. So what Cedexis does is uses data to work out the best pathways to get data from the origin to the person who wants to get it," explained Simon Jones, Evangelist and Head of Marketing at Cedexis, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
WebRTC is great technology to build your own communication tools. It will be even more exciting experience it with advanced devices, such as a 360 Camera, 360 microphone, and a depth sensor camera. In his session at @ThingsExpo, Masashi Ganeko, a manager at INFOCOM Corporation, introduced two experimental projects from his team and what they learned from them. "Shotoku Tamago" uses the robot audition software HARK to track speakers in 360 video of a remote party. "Virtual Teleport" uses a multip...
A strange thing is happening along the way to the Internet of Things, namely far too many devices to work with and manage. It has become clear that we'll need much higher efficiency user experiences that can allow us to more easily and scalably work with the thousands of devices that will soon be in each of our lives. Enter the conversational interface revolution, combining bots we can literally talk with, gesture to, and even direct with our thoughts, with embedded artificial intelligence, whic...
SYS-CON Events announced today that Evatronix will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Evatronix SA offers comprehensive solutions in the design and implementation of electronic systems, in CAD / CAM deployment, and also is a designer and manufacturer of advanced 3D scanners for professional applications.
Leading companies, from the Global Fortune 500 to the smallest companies, are adopting hybrid cloud as the path to business advantage. Hybrid cloud depends on cloud services and on-premises infrastructure working in unison. Successful implementations require new levels of data mobility, enabled by an automated and seamless flow across on-premises and cloud resources. In his general session at 21st Cloud Expo, Greg Tevis, an IBM Storage Software Technical Strategist and Customer Solution Architec...
To get the most out of their data, successful companies are not focusing on queries and data lakes, they are actively integrating analytics into their operations with a data-first application development approach. Real-time adjustments to improve revenues, reduce costs, or mitigate risk rely on applications that minimize latency on a variety of data sources. In his session at @BigDataExpo, Jack Norris, Senior Vice President, Data and Applications at MapR Technologies, reviewed best practices to ...
An increasing number of companies are creating products that combine data with analytical capabilities. Running interactive queries on Big Data requires complex architectures to store and query data effectively, typically involving data streams, an choosing efficient file format/database and multiple independent systems that are tied together through custom-engineered pipelines. In his session at @BigDataExpo at @ThingsExpo, Tomer Levi, a senior software engineer at Intel’s Advanced Analytics gr...
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, it’s about the data consumed and generated. The devices are tools, mechanisms, conduits. In his session at Internet of Things at Cloud Expo | DXWor...