AjaxLine

Simple Asp.Net + Ajax example

Wed, 2006-02-15 22:15 | 11 comments

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)

Tags:

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

Saurabh

Tue, 2009-02-10 12:51

Hi ......

i try this example....
but i have one problem

var retval=obj.responseText;

obj.responseText is returning the whole Page HTML.

i think.....it should return only "Hello Ajax!!!"

m i did some mistake???

any Ideas??

Kind Regards,
Saurabh

Anonymous

Mon, 2009-12-07 08:59

Really a nice explanation

Deepak

Sat, 2010-04-10 04:56

hi, I am Deepak. I am New to Ajax Can you send me other Examples .net with Ajax Technology. Thanks.

Anonymous

Tue, 2010-04-13 05:59

yryrtyery

Smith

Tue, 2010-05-11 09:55

http://www.hibuddyz.com/forum

Smith

Tue, 2010-05-11 09:56

More good examples you can find here:
http://www.hibuddyz.com/forum

Anonymous

Mon, 2010-07-12 09:32

ihih

Anonymous

Wed, 2010-08-11 07:20

sdfgdf

Anonymous

Wed, 2010-08-11 13:05

i am facing problem in website development
when i clik on diferen pages page gets referesh i dont want to refresh page

i want to make constant left and uper master page portion and when i click on specific link only iner page get change

any help from ur side will be great relief for me

Anonymous

Wed, 2010-08-11 13:06

i have used ajax but its for partial page refersh

i want to use it for whole site stop refersh





Advertise on this site

Search

AjaxLine

Simple Asp.Net + Ajax example

Comments

Recent Comments

Popular articles