AJAX

Getting Started With AJAX

This is the first installment of a new online column for Visual Studio Magazine. The column will focus on several key .NET technologies, including ASP.NET AJAX, Silverlight, XML and Web services. It'll provide short to-the-point articles from which you can quickly and easily glean information.
In this article, I'll introduce AJAX, walking you through the concepts behind it, demonstrating how it works, and explaining why you may want to use it in your ASP.NET Web sites.

What Is AJAX?

AJAX, or Asynchronous JavaScript and XML, is an acronym for many technologies, rather than a single technology. It has been around for many years. Back in the old days, you could implement AJAX principles by using remote scripting (which relied on a Java Applet), the Internet Explorer 5 Web Service Behavior (which relied on JavaScript and the XMLHttpRequest object), or IFrames.

Today, most Web applications send data to a server by performing postback operations that reload the entire page. For example, if you click on a button or select an item from a drop-down list, you will see the page reload, even though you may have only requested a small amount of new information.

When Internet Explorer 5 was released, it enabled you to build Web applications that sent requests to the server without requiring full postback operations and page reloads. Instead, you could use it for "partial page updates" or updates to specific parts of a page. Partial page updates offered better performance times and created happier end users.

All modern browsers (including Internet Explorer, FireFox, Safari and Opera) provide partial page updates by supporting AJAX capabilities. AJAX describes the process during which Web pages leverage JavaScript, the XMLHttpRequest and Dynamic HTML (DHTML) to make asynchronous calls to a server and update parts of a page when a response is received. Asynchronous AJAX calls are one or more calls made to a server while a user interacts with a browser that is performing other actions. Making these calls results in richer applications that look and feel more like desktop applications.

While AJAX sounds good in principle, it can be problematic to implement across multiple browsers. Internet Explorer 5 and Internet Explorer 6 rely on built-in ActiveX controls to make AJAX calls, whereas FireFox, Safari, Opera and Internet Explorer 7 use a built-in JavaScript XMLHttpRequest object. To write cross-browser AJAX code, you must understand JavaScript and the different ways browsers can call a server asynchronously.

Listing 1 shows a simple example of how you can make a cross-browser AJAX call to add two numbers and show the result. As you look through the code in Listing 1, you'll see that the GetXmlHttp() function performs several checks to determine how to properly create the XMLHttpRequest object and use it based upon the browser. You can write this code several ways, including using try/catch blocks to load a particular XMLHttpRequest object.

XMLHttpRequest Object in Different Browsers
Listing 1. Accounting for differences in how browsers use the XMLHttpRequest object can be painful. This listing shows a simple cross-browser example of how you can make AJAX requests using the XMLHttpRequest object. The complete code for this example is available in the article's code download.

<script type="text/javascript">

    var xmlHttp = null;

    function Add()

    {

       var x = document.getElementById("txtX").value;

       var y = document.getElementById("txtY").value;

       //Create params string to be posted to server

       var params  = encodeURI("x=" + x + "&y=" + y);

       xmlHttp = GetXmlHttp("POST","XmlHttpHandler.ashx");

       xmlHttp.onreadystatechange = OnStateChange;

       xmlHttp.send(params);

    }

    function OnStateChange()

    {

       if (xmlHttp.readyState == 4)

       {   

           if (xmlHttp.status == 200)

           {

              document.getElementById("lblResult").innerHTML = 

                xmlHttp.responseText;

           }

       }

    }

    function GetXmlHttp(verb,url)

    {

       var request = null;

       //Create XmlHttpxmlHttp object

       var ua = navigator.userAgent.toLowerCase();

       if (window.XMLHttpRequest) //IE7, Safari, Mozilla

       {

           request = new XMLHttpRequest();

       }

       else //IE5, IE6

       {

           if (ua.indexOf('msie 5') == -1)

             request = new ActiveXObject("Msxml2.XMLHTTP");

           else

             request = new ActiveXObject("Microsoft.XMLHTTP");

       }

       request.open(verb.toUpperCase(),url,true);

       if (verb.toUpperCase() == "POST") 

           request.setRequestHeader("Content-type", 

             "application/x-www-form-urlencoded");

       return request;

    }

</script>

Fortunately, you can rely on one of many AJAX frameworks to avoid the complexities of writing AJAX code. Microsoft's recently released ASP.NET AJAX Extensions is a very useful framework. It can greatly simplify the amount of work you have to complete to AJAX-enable a Web page.

ASP.NET AJAX Options

Microsoft has three options for adding AJAX functionality into new or existing Web sites, all of which can be downloaded for free at http://ajax.asp.net. These options include ASP.NET AJAX Extensions, ASP.NET AJAX Control Toolkit and ASP.NET AJAX Futures.

ASP.NET AJAX Extensions provides a complete framework for working with AJAX technologies. It includes a client-side script library as well as several server-side ASP.NET controls. This framework extends existing ASP.NET functionality and provides a familiar development environment for existing ASP.NET application developers. By using the framework, you can AJAX-enable new or existing Web sites with limited understanding of JavaScript and the XMLHttpRequest object.

With the ASP.NET AJAX Control Toolkit, Microsoft released over 30 AJAX-enabled ASP.NET server controls. These controls can perform a variety of AJAX functions, including showing specialized modal pop-ups, reordering lists using drag-and-drop functionality, adding watermarks to textboxes, providing hover menus and more. The toolkit controls are available in a single assembly that can be dropped into your ASP.NET application's bin folder.

Finally, for those of you who like to stay on the cutting edge, Microsoft has also released ASP.NET AJAX Futures. This download contains future AJAX technologies that aren't officially supported in production environments yet. If you're interested in seeing what may be coming, then you can try out this release, but keep in mind that its documentation is limited at this point.


While AJAX is only an acronym, the technologies it references provide a great way to enhance new or existing Web sites, making them more rich, user-friendly and efficient. AJAX can be difficult to implement across different browsers, but AJAX frameworks, such as ASP.NET AJAX, are available to ease the development process. In the next column, I'll show you how to get started using the ASP.NET AJAX Extensions.