Welcome!

Cloud Expo Authors: Maureen O'Gara, Jim Kaskade, Elizabeth White, Jill Tummler Singer , Pat Romanski

Related Topics: AJAX & REA, .NET

AJAX & REA: Article

AJAX-Driven Websites: Under The Hood

Asynchronous JavaScript, XML, and more!
By Tommy Newcomb
Article Rating:
February 19, 2006 05:15 PM EST
Reads:
 95,410

Recently, a number of Web sites have begun to raise some eyebrows within the developer community. What's unique about these sites is that they behave more like a desktop application than a Web application. As you interact with them, they quickly display an endless amount of information to your browser without reloading the page.

At the Google Maps site for example (http://maps.google.com/), you can click on the map, zoom in, zoom out, and move around as much as you like. Your browser continues to be fed with data from the server, yet your browser doesn't have to refresh. They're not using applets, or anything like Flash, so how are they doing it?

Introducing Asynchronous JavaScript + XML, also known as Ajax. To properly describe what Ajax is, it's easiest to contrast it with what it's not. For most Web sites, interaction with a Web server is simplex communication - like talking to your buddy on a walkie-talkie. You speak while he receives, and vice versa, but never at the same time. For a Web user, when he or she fills out an online form and then clicks the submit button, the entire page is posted to the Web server and the user must wait for the server to receive the request. When the server finishes processing the request, it sends the processed content back. Only then does the user's page finally refresh (see Figure 1). Ajax is an attempt to alleviate this choppy sequence of events. When the user is at an Ajax Web site the browser can call the Web server asynchronously, behind the scenes - without posting the entire page.

Nuts & Bolts
Currently there's no SDK for Ajax. It's not something you can download. It is actually a conglomeration of several technologies that may or may not even use XML, despite the fact that XML is represented in the Ajax name. Taking a look underneath the hood, we see a mixture of technologies being used. JavaScript, the DOM, XMLHttp, and XML are the key players. Keep in mind though, there are neither standards nor strict definitions for this methodology. What you find in one implementation may differ from another. However, one thing that is common to Ajax implementations is JavaScript.

As the user interacts with the browser, the JavaScript code will handle various events, such as the keystroke or click events, and deal with them accordingly. JavaScript uses the XMLHttpRequest object as the liaison between the browser and the remote server. Microsoft was first to implement the XMLHttpRequest object in Internet Explorer 5 (since then, the other major browsers have added support for this object as well).

The cool thing about the XMLHttp-Request object is that it can talk with the Web server whilst running in the background, asynchronously, without having to reload the page. When the Web server receives a request from a browser, it does its processing and then returns processed XML data back to the browser. The JavaScript engine will receive this processed XML, and use the DOM to manipulate the page elements accordingly. For example, in an Ajax-driven page, such as the Google Suggest site (www.google.com/webhp?complete=1&hl=en), as you type in the search field each letter is sent to the server asynchronously. When typing, words quickly appear below the text. Behind the scenes, it's making several calls to the server for each keystroke. The user isn't hassled by this, because their interaction isn't being interrupted. Only a portion of the page is being refreshed. This can all be done efficiently, because only a fraction of the page data is sent over the wire, rather than the entire page.

An Ajax Example
Let's take a look at a simple Ajax example. It consists of only two pages, HTMLStartPage.htm, and HandleAjaxRequests.aspx. HTMLStartPage.htm contains two text boxes. This demonstrates how characters typed by the user can be sent to the HandleAjaxRequests.aspx page one by one, processed, and then echoed back to HTMLStartPage.htm's second text box. Figure 2 is a visual representation of this example.

The meat of Ajax lies in the JavaScript. Looking at the code, we see that the text box, txtStart, calls the SendValue(val) function for any onKeyUp events within txtStart.

When a user types a character and the SendValue(Val) is called, the HTTPRequest object is initialized first. At this point we determine if the current browser is IE, or some-thing else like Mozilla or Netscape, so we can create the objRequest (HTTPRequest) correctly. Next, to handle things on the server side, we load the "url" variable with the location of the aspx page that will do our processing.

Next, let's look at the three objRequest lines. First, the objRequest.onreadystatechange is called. The onreadystatechange property helps us set up a callback function. This callback will be called only when the readyState property changes; that is, when we get data back from the Web server. The callback function will handle it at that time.

The objRequest.open requires three parameters: a GET or POST, a string for the "url" we defined earlier, and a Boolean value that defines whether this call is asynchronous or not. Note that if this Boolean value is set to true, as it is here, a callback function is required.

The objRequest.send(null) line actually calls the aspx page defined in the "url" variable. However, before we go on to the aspx page, notice the callback function (Process()). Remember, this is the function that will be called (back) after the Web page code has processed our request; it's our reentry point. Here, we simply take the values returned from our aspx page, and put them into the second text box (txtEchoOutPut).

For our aspx page, I made things as simple as possible. It receives the keystroke as a querystring value and I add some text to the string ("You typed:") to prove that we hit the server, and then we echo back the same text. After this aspx page is hit, the callback function (Process()) is fired within the JavaScript, as described earlier.

From the user's perspective, this is all done very quickly. When a user types in the first text box, their letters appear within the second text box immediately. The typed text is actually making a round trip to the server and back.

Ajax Is Not New
It should be noted that Ajax is not new. The methodology has been around for years. Web sites like Google are now proving Ajax's usefulness, stability, and the ability to make the Web closely resemble that of a desktop application: the holy grail of Web development. And what's special about Ajax is that it can do all of this using proven, existing technology. In other words, any standard browser (that can handle JavaScript and the DOM) will work. You don't need to install something separate, like a plug-in.

Here at Magenic, we're taking a look at how this methodology can benefit our clients. Ajax is not something that will replace every Web site, as we know it, but it has a place and it's a skill we want to have in our repertoire.

Published February 19, 2006 – Reads 95,410
Copyright © 2006 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

More Stories By Tommy Newcomb

Tommy Newcomb works for Magenic as an IT consultant in the Chicago area.
His main focus is developing Web application and E-commerce work using Microsoft technologies. He lives with his wife, Emily, and baby daughter, Jaqueline, in the Chicago suburbs.

Comments (7) 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
Kartik 04/19/06 08:24:39 AM EDT

Hi from Kartik
SYS-CON Australia News Desk 02/19/06 06:23:28 PM EST

Recently, a number of Web sites have begun to raise some eyebrows within the developer community. What's unique about these sites is that they behave more like a desktop application than a Web application. As you interact with them, they quickly display an endless amount of information to your browser without reloading the page. At the Google Maps site for example (http://maps.google.com/), you can click on the map, zoom in, zoom out, and move around as much as you like. Your browser continues to be fed with data from the server, yet your browser doesn't have to refresh. They're not using applets, or anything like Flash, so how are they doing it? Introducing Asynchronous JavaScript + XML, also known as Ajax. To properly describe what Ajax is, it's easiest to contrast it with what it's not. For most Web sites, interaction with a Web server is simplex communication - like talking to your buddy on a walkie-talkie. You speak while he receives, and vice versa, but never at the same time. For a Web user, when he or she fills out an online form and then clicks the submit button, the entire page is posted to the Web server and the user must wait for the server to receive the request. When the server finishes processing the request, it sends the processed content back. Only then does the user's page finally refresh (see Figure 1). Ajax is an attempt to alleviate this choppy sequence of events. When the user is at an Ajax Web site the browser can call the Web server asynchronously, behind the scenes - without posting the entire page.
news desk 02/13/06 08:43:24 PM EST

Recently, a number of Web sites have begun to raise some eyebrows within the developer community. What's unique about these sites is that they behave more like a desktop application than a Web application. As you interact with them, they quickly display an endless amount of information to your browser without reloading the page. At the Google Maps site for example (http://maps.google.com/), you can click on the map, zoom in, zoom out, and move around as much as you like. Your browser continues to be fed with data from the server, yet your browser doesn't have to refresh. They're not using applets, or anything like Flash, so how are they doing it? Introducing Asynchronous JavaScript + XML, also known as Ajax. To properly describe what Ajax is, it's easiest to contrast it with what it's not. For most Web sites, interaction with a Web server is simplex communication - like talking to your buddy on a walkie-talkie. You speak while he receives, and vice versa, but never at the same time. For a Web user, when he or she fills out an online form and then clicks the submit button, the entire page is posted to the Web server and the user must wait for the server to receive the request. When the server finishes processing the request, it sends the processed content back. Only then does the user's page finally refresh (see Figure 1). Ajax is an attempt to alleviate this choppy sequence of events. When the user is at an Ajax Web site the browser can call the Web server asynchronously, behind the scenes - without posting the entire page.
AJAX News Desk 12/23/05 09:46:17 AM EST

AJAX-Driven Websites: Under The Hood
Recently, a number of Web sites have begun to raise some eyebrows within the developer community. What's unique about these sites is that they behave more like a desktop application than a Web application. As you interact with them, they quickly display an endless amount of information to your browser without reloading the page. At the Google Maps site for example (http://maps.google.com/), you can click on the map, zoom in, zoom out, and move around as much as you like. Your browser continues to be fed with data from the server, yet your browser doesn't have to refresh. They're not using applets, or anything like Flash, so how are they doing it? Introducing Asynchronous JavaScript + XML, also known as Ajax. To properly describe what Ajax is, it's easiest to contrast it with what it's not. For most Web sites, interaction with a Web server is simplex communication - like talking to your buddy on a walkie-talkie. You speak while he receives, and vice versa, but never at the same time. For a Web user, when he or she fills out an online form and then clicks the submit button, the entire page is posted to the Web server and the user must wait for the server to receive the request. When the server finishes processing the request, it sends the processed content back. Only then does the user's page finally refresh (see Figure 1). Ajax is an attempt to alleviate this choppy sequence of events. When the user is at an Ajax Web site the browser can call the Web server asynchronously, behind the scenes - without posting the entire page.
SYS-CON Italy News Desk 10/31/05 02:33:45 PM EST

AJAX-Driven Web Sites: Under The Hood. Recently, a number of Web sites have begun to raise some eyebrows within the developer community. What's unique about these sites is that they behave more like a desktop application than a Web application. As you interact with them, they quickly display an endless amount of information to your browser without reloading the page. At the Google Maps site for example (http://maps.google.com/), you can click on the map, zoom in, zoom out, and move around as much as you like. Your browser continues to be fed with data from the server, yet your browser doesn't have to refresh. They're not using applets, or anything like Flash, so how are they doing it? Introducing Asynchronous JavaScript + XML, also known as Ajax. To properly describe what Ajax is, it's easiest to contrast it with what it's not. For most Web sites, interaction with a Web server is simplex communication - like talking to your buddy on a walkie-talkie. You speak while he receives, and vice versa, but never at the same time. For a Web user, when he or she fills out an online form and then clicks the submit button, the entire page is posted to the Web server and the user must wait for the server to receive the request. When the server finishes processing the request, it sends the processed content back. Only then does the user's page finally refresh (see Figure 1). Ajax is an attempt to alleviate this choppy sequence of events. When the user is at an Ajax Web site the browser can call the Web server asynchronously, behind the scenes - without posting the entire page.
news desk 10/31/05 08:36:59 AM EST

Recently, a number of Web sites have begun to raise some eyebrows within the developer community. What's unique about these sites is that they behave more like a desktop application than a Web application. As you interact with them, they quickly display an endless amount of information to your browser without reloading the page. At the Google Maps site for example (http://maps.google.com/), you can click on the map, zoom in, zoom out, and move around as much as you like. Your browser continues to be fed with data from the server, yet your browser doesn't have to refresh. They're not using applets, or anything like Flash, so how are they doing it?
Tommy Newcomb 07/13/05 08:17:56 PM EDT

Recently, a number of Web sites have begun to raise some eyebrows within the developer community. What's unique about these sites is that they behave more like a desktop application than a Web application. As you interact with them, they quickly display an endless amount of information to your browser without reloading the page. At the Google Maps site for example (http://maps.google.com/), you can click on the map, zoom in, zoom out, and move around as much as you like. Your browser continues to be fed with data from the server, yet your browser doesn't have to refresh. They're not using applets, or anything like Flash, so how are they doing it? Introducing Asynchronous JavaScript + XML, also known as Ajax. To properly describe what Ajax is, it's easiest to contrast it with what it's not. For most Web sites, interaction with a Web server is simplex communication - like talking to your buddy on a walkie-talkie. You speak while he receives, and vice versa, but never at the same time. For a Web user, when he or she fills out an online form and then clicks the submit button, the entire page is posted to the Web server and the user must wait for the server to receive the request. When the server finishes processing the request, it sends the processed content back. Only then does the user's page finally refresh (see Figure 1). Ajax is an attempt to alleviate this choppy sequence of events. When the user is at an Ajax Web site the browser can call the Web server asynchronously, behind the scenes - without posting the entire page.
Cloud Expo Breaking News
By Elizabeth White
Cloud is a shift from the focus on underlying technology implementation to leveraging existing implementations and further building upon them. Cloud orchestration or a network of clouds is the wave of the future where these clouds can operate with elasticity, scalability, and efficiency. Effective service management is an important aspect of managing such networks. The transition to the cloud will enable the further aggregation of composite web services and enhanced business-to-business capabili...
Feb. 18, 2012 11:00 AM EST  Reads: 537
By Pat Romanski
The focus of Java EE 7 is on the cloud, and specifically it aims to bring Platform-as-a-Service providers and application developers together so that portable applications can be deployed on any cloud infrastructure and reap all its benefits in terms of scalability, elasticity, multitenancy, etc. The existing specifications in the platform such as JPA, Servlets, EJB, and others will be updated to meet these requirements. Java EE 7 continues the ease of development push that characterized prior ...
Feb. 18, 2012 10:45 AM EST  Reads: 2,258
By Jeremy Geelan
With Cloud Expo 2012 New York (10th Cloud Expo) just four months away, what better time to start introducing you in greater detail to the distinguished individuals in our incredible Speaker Faculty for the technical and strategy sessions at the conference... We have technical and strategy sessions for you every day from June 11 through June 14 dealing with every nook and cranny of Cloud Computing and Big Data, but what of those who are presenting? Who are they, where do they work, what else h...
Feb. 18, 2012 08:30 AM EST  Reads: 592
By Liz McMillan
Wide and cheap availability of cloud-based media services is upon us. With the transformations these services are already bringing to the consumption of music, video and interactive media, change has likewise come to professional workflows. Documents in 2012 are read, written, collaborated on, and distributed anywhere an Internet-enabled device can reach – which is to say, everywhere. In his session at the 10th International Cloud Expo, Christopher Kenneally, Director of Business Development a...
Feb. 17, 2012 02:00 PM EST  Reads: 540
By Kevin Jackson
CONGRATULATIONS to National Reconnaissance Office (NRO) CIO Jill T. Singer for being selected as one of the 10 winners of the first annual CloudNOW awards presented in Santa Clara, California earlier this week.

From the NRO Press Release:
"Considered one of the top women leaders in Federal IT, Ms. Singer was recognized for her innova...
Feb. 17, 2012 07:00 AM EST  Reads: 528
By Brian McCallion
I've been working on Enterprise Cloud Strategy and in the course of this work identified some interesting and non-obvious opportunities in the Cloud. One solution I’ve examined is the well-crafted solution that is enStratus. enStratus has built a SaaS Cloud Management / Governance product focused on providing critical management, monitoring, governance capabilities tailored to the needs of the Global 2000 market, rather than the startup market. As I have worked with a current Fortune 500 clie...
Feb. 17, 2012 07:00 AM EST  Reads: 3,679
By Jeremy Geelan
With Cloud Expo 2012 New York (10th Cloud Expo) now under four months away, what better time to start introducing you in greater detail to the distinguished individuals in our incredible Speaker Faculty for the technical and strategy sessions at the conference... We have technical and strategy sessions for you every day from June 11 through June 14 dealing with every nook and cranny of Cloud Computing and Big Data, but what of those who are presenting? Who are they, where do they work, what e...
Feb. 16, 2012 07:30 AM EST  Reads: 936
By Pat Romanski
2011 was a year of rapid adoption for public and private cloud services. Instant and on-demand server provisioning was the driving force behind the massive growth. On top, cloud server templates and script automation simplified application installation for simple and pre-defined application stacks, but have not targeted more complex enterprise application environments. In his session at the 10th International Cloud Expo, John Yung, CEO of Appcara, will discuss how 2012 will be the year for app...
Feb. 16, 2012 06:30 AM EST  Reads: 2,044
By Jeremy Geelan
"Having been in the IT field for many years, I believe the cloud computing chapter in the industry is an exciting one and I am proud to be a part of it," said National Reconaissance Office (NRO) Chief Information Officer Jill T. Singer Tuesday, as it was announced that she was one of 10 winners of the 2012 CloudNOW "Top Ten Women in Cloud" Awards.
Feb. 16, 2012 06:30 AM EST  Reads: 609
By Liz McMillan
As more enterprises are adopting clouds, the nature of cloud computing is changing. Previously, clouds were used to test applications or for non-mission critical applications. Today, enterprises are using clouds for cost-saving advantages and launching more mission critical applications that have defined performance needs. In his session at the 10th International Cloud Expo, Eric Shepcaro, CEO and Chairman of the Board of Telx, will discuss how distributed computing has many advantages. It wou...
Feb. 16, 2012 05:45 AM EST  Reads: 1,851
MORE »