Simply AJAX

• Download demo project - 38.4 Kb

This article is intended to be a simple introduction to AJAX.

This example simply fills a table with values when the user makes a selection. It is intended to illustrate how easy it is to implement custom AJAX into your applications. There are many AJAX libraries available. However, if you have ever tried to customize AJAX to fit your unique application needs, you may have experienced frustration in getting it to do exactly what you needed. AJAX is a very simple technology, but understanding the basic functionality is key when implementing a custom solution. This example is intended to serve that purpose.

Using the code

This project was developed using Visual Studio 2005. The source code is commented and should be easy to follow. There are two ASPX pages in the solution. One is "passer" and the other is "catch." passer.aspx is the page that the user interacts with. catch.aspx is not seen, but prepares the XML and passes it back to passer.aspx.

This example uses an array to hold the data, but it could easily be adapted to use other data structures. The C# XmlTextWriter class makes turning any type of data into XML a breeze. The most challenging part was developing the JavaScript to populate the client control. Below is a generic function to create an XMLHttpRequest object:

var http_request=false;
function Begin()
{
    ////////////////////  Create ActiveX Object (Microsoft) ////////////////

    try 
    {
        http_request = new XMLHttpRequest();
    }
    catch (e)
    {
        try 
        {
            http_request = new ActiveXObject("MsXML_Container.XMLHTTP");
        } 
        catch (o)
        {
            try
            {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed)
            {
                http_request = false;
            }
        }//End catch (e)

    }//End catch(o)


    if (!http_request)
    alert("Error initializing XMLHttpRequest!");
    ////////////////////////////////////////////////////////////////////////

}

Below, we are creating and defining the parameters to send via URL to catch.aspx before defining the return function:

    // URL 

    // This is the page that processes the request and then returns the XML

    // Append ?(selection) to the URL (dropdownlist value in this example)

    var url="Catch.aspx?choice=" + document.forms[0].ddlChoice.value;

    // Open Params Send, set Headers 

    http_request.open("GET",url,true);
    http_request.setRequestHeader('content-type', 'text/xml');
    http_request.setRequestHeader('Cache-Control:', 'no-cache');

    // Define the Javascript function to handle the response

    http_request.onreadystatechange = ShowResults; 
    http_request.send(null);    // Send the request to Catch.aspx 

}// End Begin  

             
function ShowResults()/***********************************************/
{
    var Request_Text=""; 
        // Variable to hold the XML/Text returned from Catch.aspx

    if (http_request.readyState == 4)
    if (http_request.status==200)
        // Make sure the response is valid and Complete

    {
        Request_Text=http_request.responseText;// Assign the response

        var XML_Container = 
            new ActiveXObject("Microsoft.XMLDOM");// Create XML Container

        XML_Container.async = false;
        XML_Container.loadXML(Request_Text);
            // Load the Container with the Text Response

           
/////////////////////////////////////////////////////////////////////////////

// At this point, you have successfully requested the information. It's been

// returned to you in text format (request.responseText) and loaded into

// an XML container (XML_Container). Now the parsing and populating of your

// desired control can begin. (A dynamically generated table in this case.)

/////////////////////////////////////////////////////////////////////////////

Points of interest

I originally developed this code to populate a datagrid with datasets retrieved from an SQL database via stored procedures. I tried many packaged AJAX libraries, but wasn't able to adapt them to the application's requirements. Learning how AJAX works behind the scenes has been a great help in designing rich user interfaces and fast response times. This example provides a fully (albeit simple) functional example of how AJAX can be used to provide a Desktop Application feel.

Yes, I know, this is a Microsoft IE example. It could, however, easily be modified to work with other browsers. Feel free to e-mail me with any questions, comments and suggestions.

History

• 9 July, 2007 -- Original version posted