ZonaNet Blog: AJAX for ASP.NET
ZonaNet Blog Home Page



Are You ZonaNet Blog Visitor?


eXTReMe Tracker

Monday, July 09, 2007

Introduction - What is AJAX?

AJAX, or Asynchronous JavaScript and XML,is a fancy way to use JavaScript and XML to communicate with a web server without refreshing the web page.
You can visit this web page for more information about AJAX; it has a good list of links.

Why use AJAX?

There are a couple of reasons to use AJAX in lieu of the traditional form submission. The first is that it is very light weight: instead of sending all of the form information to the server and getting all of the rendered HTML back, simply send the data the server needs to process and get back only what the client needs to process. Light weight means fast. The second reason to use AJAX is because (as the logo in the link above makes clear) AJAX is cool.

Using AJAX with ASP.NET

Even though AJAX is a client side technology that uses JavaScript, the client-server interaction is very important.

Adam Vandenberg has put together a nice JavaScript wrapper for AJAX. His wrapper even does caching, although that will not be discussed here. His wrapper is used in the code examples and project files.

Using the code

There are four parts of the code that are important to look at:

  1. The HTML

    There are two form elements that will interact with AJAX. The input button "btn1" will invoke the AJAX code, which will make a server call and fill the select element "select1".

  2. The JavaScript that calls the AJAX.

    The function getOptions() will do the main work.

    // Create the Request object (the AJAX wrapper)
    var request = new Request();
    // Change this to fit your environment
    var url = "http://localhost/ajax/";
    function getOptions()
    // Call the AJAX
    // Notice the second parameter is actually a function to handle the
    // response

    request.GetNoCache(url + "requests/getOptions.aspx",
    if (result.readyState!=ReadyState.Complete)
    if (result.status==HttpStatus.OK && result.responseText != "")
    // If the request was successfull and returned data
    var vals = result.responseText.split("~");
    for (i=0; ivar pair = vals[i].split("|");
    var op = new Option(pair[1], pair[0], false, false);
    var sel = document.getElementById("select1");
    sel.options[sel.length] = op;
    alert("Remember that the new values in form" +
    " element 'select1' are not in viewstate." +
    " Code appropriately.");
    // Handle the failure condition
    alert('Get options failed.');
  3. The ASPX file.

    The important thing here is that the aspx file only returns the string (XML) data from the code behind.

    <%@ Page language="c#"            Codebehind="getOptions.aspx.cs" 
  4.  AutoEventWireup="false"
  5.  Inherits="ajax.requests.getOptions" %>
  6. The code behind.
    protected string result = string.Empty;
    private void Page_Load(object sender, System.EventArgs e)
    for (int i=0; i<10; i++)
    result += i.ToString() + "|option " + i.ToString() + "~";
    // to drop the last '~'
    result = result.Substring(0, result.Length - 1);
to Download source files click on link down :


password extract file : ZonaNet

Enjoy It....ZonaNet


posted by ZonaNet @ 6:41 AM  
Post a Comment
About Me

Name: Yazin Alhamdi
Country: LIBYA
About Me: Angel!
Email: yazin.alhamdi@gmail.com
My Guest Book
Previous Post
Powered by


© ZonaNet Blog Template by ZonaNet