Click here to Skip to main content
15,870,130 members
Articles / Web Development / ASP.NET
Article

Simply AJAX

Rate me:
Please Sign up or sign in to vote.
3.11/5 (15 votes)
9 Jul 2007CPOL2 min read 46.2K   387   26   12
This article illustrates how to implement a simple AJAX example

Screenshot - ScreenShot.gif

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:

C#
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:

JavaScript
    // 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Systems Engineer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralExcellent Pin
ashu84code11-Jul-07 1:59
ashu84code11-Jul-07 1:59 
GeneralRe: Excellent Pin
Clift Maples11-Jul-07 2:20
Clift Maples11-Jul-07 2:20 
GeneralRe: Excellent Pin
ashu84code11-Jul-07 17:42
ashu84code11-Jul-07 17:42 
Thanks for quick response.
your solution will help me lot .
But is there any way to encrypt or hide our javascript ?? so, when client save html and JS file , he/she can not read JS file .

Thanks .
Rose | [Rose] Blush | :O
GeneralRe: Excellent Pin
rilov12-Jul-07 2:37
rilov12-Jul-07 2:37 
GeneralRe: Excellent Pin
Nickolay Karnaukhov12-Jul-07 22:46
Nickolay Karnaukhov12-Jul-07 22:46 
GeneralRe: Excellent [modified] Pin
rilov13-Jul-07 0:13
rilov13-Jul-07 0:13 
GeneralRe: Excellent Pin
ashu84code14-Jul-07 1:42
ashu84code14-Jul-07 1:42 
GeneralGood barebones example Pin
leppie9-Jul-07 21:20
leppie9-Jul-07 21:20 
GeneralGood sample Pin
thebossedgar9-Jul-07 10:11
thebossedgar9-Jul-07 10:11 
GeneralRe: Good sample Pin
Clift Maples9-Jul-07 13:54
Clift Maples9-Jul-07 13:54 
GeneralNice simple newbie example. But... Pin
Evyatar Ben-Shitrit9-Jul-07 9:36
Evyatar Ben-Shitrit9-Jul-07 9:36 
GeneralRe: Nice simple newbie example. But... Pin
Clift Maples9-Jul-07 14:03
Clift Maples9-Jul-07 14:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.