Creating web pages with rich content yet nimble response is the holy grail of web development. For years, desktop applications have performed user interface operations with almost no perceptible delay, but web applications have been at the mercy of the speed of the Internet connection. Even with a fast Internet connection, though, many web applications with rich content are sluggish.

This article offers a solution. It’s with the addition of Asynchronous JavaScript And XML (AJAX) extensions. These extensions go beyond the traditional ASP.NET controls and give you the ability to make your web pages respond almost as well as desktop applications—even if the content is relatively rich.

AJAX Explained: What It Does And Why You Should Consider Using It

AJAX is a new technology that relies on JavaScript. The JavaScript code that AJAX employs allows it to perform to the point that there’s very little perceptible delay with the user interface. This means that the user experience is far more enjoyable since users don’t wait for page updates and refreshes.

ASP.NET Postback Architecture

Let’s start by talking about the ASP.NET postback architecture. Let’s say I create an ASP.NET web application that has two text fields, a button, and a label. The text fields allow users to enter the width and a height of a rectangle; then the button calculates the area of the rectangle; and finally the area is placed into the label showing the results of the calculation.

If this web application was a desktop application, the architecture would be trivial. The program code would simply get the values, do the calculation, and then display the result. But ASP.NET controls execute on the server and not on the client machine. This means that the page needs to present its data to the server so that the server can do the calculation, populate the label with the result, and serve up the new page.

When Microsoft first introduced this technology in 2000, developers were not crazy about it. That’s because it puts more load on servers since the calculation and result display requires a round trip to the server. But developers soon realized how easy it made web application development, so the postback architecture won the day.

Unfortunately, though, the round trip to the server causes a delay. While a desktop application does this with no real delay, a web application may give a noticeable delay if there is a lot of traffic. So while the ASP.NET postback architecture is brilliant for easy and robust web development, AJAX, a way to get rid of the page round trip delays was developed.

I created a web application named TimePostbacks that is shown in the figure below. It calculates the area of a rectangle and shows the postback time in milliseconds.

Partial Page Updates

We can just about solve the postback delay issue if our applications can simply update the portion of the page that needs to be updated. Easy, right? People have been trying to solve that for years with IFRAMES and other technologies. But none have worked nearly as well as AJAX, which is built on JavaScript technology.

AJAX allows web applications to perform partial page updates. Only the page elements that need to be updated are, thus providing a far more responsive page refresh mechanism. And if a web application developer is judicious in how pages are designed, there is almost no perceptible refresh delay.

How It’s Done

AJAX uses JavaScript to perform partial page updates. This section gives a short description of the mechanism.

First, let me make sure you know that JavaScript is not Java. Java is compiled binary code that can reside on the Internet as applets. These applets are loaded and executed via the Java Virtual Machine (JVM).

JavaScript is part of an HTML page. It can technically be a separate file that’s referenced in an HTML page, but the browser treats it as if the referenced code is part of the HTML where it’s referenced.

The browser interprets JavaScript code. While interpreted code is not as fast as compiled code, modern-day browsers and fast machines easily handle the interpretation so that users don’t notice.

JavaScript has been used for many years in a technique known as Dynamic HTML (DHTML). It’s a way of making HTML more dynamic by allowing the client machine to act on HTML elements. For instance, DHTML code can cause a test string to turn green with the mouse hovers over it, and then back to black when the mouse leaves its area.

Here’s a simple JavaScript page that changes the color of a text string when the mouse hovers over it.

<html>
<body>
<h1>This page demonstrates DHTML.</h1>
<span id="Test"
  onMouseOver="this.style.color='green'"
  onMouseOut="this.style.color='black'">
    Hi there, hover over me.</span>
</body>
</html>

DHTML isn’t enough to do partial page updates. We still need a way to make a request from the server. The mechanism that’s used for this is an HTTP Request, performed by the JavaScript XMLHttpRequest object.

With an HTTP request, a web page can make a request to, and get a response from a web server—without reloading the page. The user will stay on the same page, and he or she will not notice that scripts might request pages, or send data to a server in the background.

The following code performs a simple fetch of a document via an HTTP Request that relies on the XMLHttpRequest object.

<script language="JavaScript">

var XMLHttp;

function LoadData(url)
{

     XMLHttp = null;

     // code for Firefoxetc.
     if( window.XMLHttpRequest )
     {
          XMLHttp= new XMLHttpRequest();
     }

     // code for Internet Explorer
     else if( window.ActiveXObject )
     {
          XMLHttp= new ActiveXObject( "Microsoft.XMLHTTP" );
     }

     if( xmlhttp != null )
     {
          XMLHttp.onreadystatechange = state_Change;
          XMLHttp.open( "GET", url, true );
          XMLHttp.send( null );
     }
     else
     {
          alert( "Your browser does not support XMLHTTP." );
     }

}
</script>

Fortunately, you never need to do this kind of JavaScript coding. The AJAX extensions do it all for you. The AJAX controls inject the appropriate JavaScript code into the HTML output stream without you needing to code any JavaScript yourself.

The data that’s returned is in XML format. XML is simply a way of representing data. It’s done with tags the same way that HTML is done, except that XML allows you to create your own tags that best describe and represent your data.

Here again, you might be worried about handling the XML. Converting simple XML to non-XML data isn’t hard, but it’s an extra step that can complicate things. Fortunately, the AJAX controls handle all of this for you. Instead of actually getting XML, your controls give you simple data types such as strings and integers.