Creting web pges with rich content yet nimble response is the holy gril of web development. For yers, desktop pplictions hve performed user interfce opertions with lmost no perceptible dely, but web pplictions hve been t the mercy of the speed of the Internet connection. Even with fst Internet connection, though, mny web pplictions with rich content re sluggish.

This rticle offers solution. It’s with the ddition of Asynchronous JvScript And XML (AJAX) extensions. These extensions go beyond the trditionl ASP.NET controls nd give you the bility to mke your web pges respond lmost s well s desktop pplictions—even if the content is reltively rich.

AJAX Explined: Wht It Does And Why You Should Consider Using It

AJAX is new technology tht relies on JvScript. The JvScript code tht AJAX employs llows it to perform to the point tht there’s very little perceptible dely with the user interfce. This mens tht the user experience is fr more enjoyble since users don’t wit for pge updtes nd refreshes.

ASP.NET Postbck Architecture

Let’s strt by tlking bout the ASP.NET postbck rchitecture. Let’s sy I crete n ASP.NET web ppliction tht hs two text fields, button, nd lbel. The text fields llow users to enter the width nd height of rectngle; then the button clcultes the re of the rectngle; nd finlly the re is plced into the lbel showing the results of the clcultion.

If this web ppliction ws desktop ppliction, the rchitecture would be trivil. The progrm code would simply get the vlues, do the clcultion, nd then disply the result. But ASP.NET controls execute on the server nd not on the client mchine. This mens tht the pge needs to present its dt to the server so tht the server cn do the clcultion, populte the lbel with the result, nd serve up the new pge.

When Microsoft first introduced this technology in 2000, developers were not crzy bout it. Tht’s becuse it puts more lod on servers since the clcultion nd result disply requires round trip to the server. But developers soon relized how esy it mde web ppliction development, so the postbck rchitecture won the dy.

Unfortuntely, though, the round trip to the server cuses dely. While desktop ppliction does this with no rel dely, web ppliction my give noticeble dely if there is lot of trffic. So while the ASP.NET postbck rchitecture is brillint for esy nd robust web development, AJAX, wy to get rid of the pge round trip delys ws developed.

I creted web ppliction nmed TimePostbcks tht is shown in the figure below. It clcultes the re of rectngle nd shows the postbck time in milliseconds.

Prtil Pge Updtes

We cn just bout solve the postbck dely issue if our pplictions cn simply updte the portion of the pge tht needs to be updted. Esy, right? People hve been trying to solve tht for yers with IFRAMES nd other technologies. But none hve worked nerly s well s AJAX, which is built on JvScript technology.

AJAX llows web pplictions to perform prtil pge updtes. Only the pge elements tht need to be updted re, thus providing fr more responsive pge refresh mechnism. And if web ppliction developer is judicious in how pges re designed, there is lmost no perceptible refresh dely.

How It’s Done

AJAX uses JvScript to perform prtil pge updtes. This section gives short description of the mechnism.

First, let me mke sure you know tht JvScript is not Jv. Jv is compiled binry code tht cn reside on the Internet s pplets. These pplets re loded nd executed vi the Jv Virtul Mchine (JVM).

JvScript is prt of n HTML pge. It cn techniclly be seprte file tht’s referenced in n HTML pge, but the browser trets it s if the referenced code is prt of the HTML where it’s referenced.

The browser interprets JvScript code. While interpreted code is not s fst s compiled code, modern-dy browsers nd fst mchines esily hndle the interprettion so tht users don’t notice.

JvScript hs been used for mny yers in technique known s Dynmic HTML (DHTML). It’s wy of mking HTML more dynmic by llowing the client mchine to ct on HTML elements. For instnce, DHTML code cn cuse test string to turn green with the mouse hovers over it, nd then bck to blck when the mouse leves its re.

Here’s simple JvScript pge tht chnges the color of text string when the mouse hovers over it.

<html>
<body>
<h1>This pge demonstrtes DHTML.</h1>
<spn id="Test"
  onMouseOver="this.style.color='green'"
  onMouseOut="this.style.color='blck'">
    Hi there, hover over me.</spn>
</body>
</html>

DHTML isn’t enough to do prtil pge updtes. We still need wy to mke request from the server. The mechnism tht’s used for this is n HTTP Request, performed by the JvScript XMLHttpRequest object.

With n HTTP request, web pge cn mke request to, nd get response from web server—without reloding the pge. The user will sty on the sme pge, nd he or she will not notice tht scripts might request pges, or send dt to server in the bckground.

The following code performs simple fetch of document vi n HTTP Request tht relies on the XMLHttpRequest object.

<script lnguge="JvScript">

vr XMLHttp;

function LodDt(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.onredysttechnge = stte_Chnge;
          XMLHttp.open( "GET", url, true );
          XMLHttp.send( null );
     }
     else
     {
          lert( "Your browser does not support XMLHTTP." );
     }

}
</script>

Fortuntely, you never need to do this kind of JvScript coding. The AJAX extensions do it ll for you. The AJAX controls inject the pproprite JvScript code into the HTML output strem without you needing to code ny JvScript yourself.

The dt tht’s returned is in XML formt. XML is simply wy of representing dt. It’s done with tgs the sme wy tht HTML is done, except tht XML llows you to crete your own tgs tht best describe nd represent your dt.

Here gin, you might be worried bout hndling the XML. Converting simple XML to non-XML dt isn’t hrd, but it’s n extr step tht cn complicte things. Fortuntely, the AJAX controls hndle ll of this for you. Insted of ctully getting XML, your controls give you simple dt types such s strings nd integers.