Simple Asp.Net + Ajax example

Wed, 2006-02-15 22:15 in

Ajax + ASP.NET

Introduction
I’m going to tell you new piece of Ajax information.
Ok what’s Ajax? - Asynchronous JavaScript + XML, new great technology which closely related with conception of web2. If you saw amazing products of Google(gmail, google maps) you could notice that this applications is very similar with usual desktop applications it’s Ajax. The main point of using it is the great usability, speed of interactions and a big traffic’s economy. And your applications don’t need postbacks!!!
But it has one disadvantage you need to write a lot of client side code so you should be careful to manage with it.

Body

I’m not going to tell something tricky today I’m just want to tell about basics to make your understanding better. It’ll be button which asynchronously calls server, client side processes response and displays result in a Lable. At first I’ll show commented code then will give some explanations.

Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
<script type ="text/javascript" language="jscript">
           var obj;
              function getXMLHTTPRequest()
              {
                 var xRequest=null;
                if (window.XMLHttpRequest) {
                xRequest=new XMLHttpRequest();
                }else if (typeof ActiveXObject != "undefined"){
                  xRequest=new ActiveXObject("Microsoft.XMLHTTP");
                }
                  return xRequest;
                }
           function GetDataUsingAJAX()
           {
               obj=getXMLHTTPRequest();
               if(obj!=null)
               {
                   obj.onreadystatechange = ProcessResponse;
                   obj.open("GET", "http://localhost:1392/Ajax1/ProcessedPage.aspx", true);
                   obj.send(null);
               }
               return false;
           }

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></div>
    </form>
</body>
</html>

Little explanations
function getXMLHTTPRequest() – returns object which is core of ajax and responsible for asynchronous interactions
obj.onreadystatechange = ProcessResponse; - function ProcessResponse processes servers answer, i.e. is handler onreadystatechange event.
(obj.readyState == 4) - 4 indicates that request is over
if(obj.status == 200) - 200 indicates that request is successful.

On the server side very simple code:

Code

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Attributes.Add("OnClick", "return GetDataUsingAJAX();");

    }
}

Code

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ProcessedPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        Response.Write("Hello Ajax!!!");
        Response.End();
    }
}

I think with server code everything clear :).

Kigorw 2006 (C)

Comments

Anonymous Wed, 2007-01-03 14:05

Hi thanks for this small ajax code...
I am new to ajax can u please send me examples like this using xmlhttprequest and any book related to these type of concepts on ajax..
Thanks in advance,
Pls do send these material to asanjeevak@gmail.com

Weekly 13.10-20.10/Thanks for mentioning
Sample Chapter from Dan Wellman’s “Learning the Yahoo! User Interface Library”/Zsss
Creating Search Ajax Web Control in ASP.NET 2.0 using Client Callbacks/thanx but actually i need a
Large file uploads in ASP.NET/please send me the tutorial
Developing a Shopping Cart in ASP.NET/This tutorial is a really
How to read and write settings to App.config(Configuration in C# .NET 2.0)/what will be the code for changing connectionstring for the foll
Aptana Studio 1.0 Released/Hi
How to read and write settings to App.config(Configuration in C# .NET 2.0)/Thanks
Nested Data in Flex DataGrid by Extending DataGridColumn/Thanks for the tip. I
Exploring Caching in ASP.NET/Something big, I'll read it

Your name:
E-mail:
Homepage:
Are you human
You can use simple HTML-formatting tags(like <b>, <ul>, <code> and others)

AjaxLine