Ajax入门级程序--Helloworld

本文中的程序是Ajax的入门级例子。
通过本例可以很容易了解XmlHttpRequest在Ajax中的作用。

下面是客户端页面的Html代码，主要负责通过javascript建立一个新类CallBackObject，并将其实例化，利用XmlHttpRequest对象向服务器发送请求。

并接受服务器处理后返回的响应，根据对象的readyState值的变化，调用相应的执行函数。

 

<% @ 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 id = " Head1 "  runat = " server " >
     < title > 无标题页 </ title >
     <!-- Html注释 ->
     < script language = " javascript "  type = " text/javascript " >
     function  CallBackObject()
     ... {    
        this.XmlHttp = this.GetHttpObject();
    }
    CallBackObject.prototype.GetHttpObject  =   function () // 获得xmlhttp对象
     ... {
        var xmlhttp;
        /**//*@cc_on
        @if(@_jscript_version >= 5)
        {
            try
            {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");                
            }
            catch(e)
            {
                try
                {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(E)
                {
                    xmlhttp = false;
                }
            }
        }
        @else
        {
            xmlhttp = false;
        }
        @end @*/
        //!!!!!!!!!!!!!!!!!!!!!!!注意：/*@cc_on ， @end @*/不要分开写。!!!!!!!!!!!!!!!!!!!!!!!!!
        if(!xmlhttp && typeof XMLHTTPRequest !="undefined")
        ...{
            try
            ...{
                xmlhttp = new XMLHTTPRequest();
            }
            catch(e)
            ...{
                xmlhttp = false;
            }
        }
        return xmlhttp;
    }
    CallBackObject.prototype.DoCallBack  =   function (URL) // 向服务器发送请求，参数URL为处理客户端请求的服务器的页面
     ... {
        if(this.XmlHttp)
        ...{
            if(this.XmlHttp.readystate==4||this.XmlHttp.readystate==0)
            ...{
                var oThis = this;
                this.XmlHttp.open('POST',URL);
                this.XmlHttp.onreadystatechange = function()...{oThis.ReadyStateChange()};
                this.XmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                this.XmlHttp.send(null);
            }
        }
    }
    CallBackObject.prototype.AbortCallBack  =   function ()
     ... {
        if(this.XmlHttp)
        ...{
            this.XmlHttp.abort();
        }
    }
    CallBackObject.prototype.OnLoading  =   function ()
     ... {
        //loading
    }
    CallBackObject.prototype.OnLoaded  =   function ()
     ... {
        //loaded
    }
    CallBackObject.prototype.OnInteractive  =   function ()
     ... {
        //Interactive
    }
    CallBackObject.prototype.OnComplete  =   function (responseText,responseXML)
     ... {
        //Complete
    }
    CallBackObject.prototype.OnAbort  =   function ()
     ... {
        //Abort
    }
    CallBackObject.prototype.OnError  =   function (status,statueText)
     ... {
        //Error
    }
    CallBackObject.prototype.ReadyStateChange  =   function ()
     ... {
        if(this.XmlHttp.readystate == 1)
        ...{
            this.OnLoading();
        }
        else if(this.XmlHttp.readystate == 2)
        ...{
            this.OnLoaded();
        }
        else if(this.XmlHttp.readystate == 3)
        ...{
            this.OnInteractive();
        }
        else if(this.XmlHttp.readystate == 4)
        ...{
            if(this.XmlHttp.status == 0)
            ...{
                this.OnAbort();
            }
            else if(this.XmlHttp.status == 200&&this.XmlHttp.statusText == "OK")
            ...{
                this.OnComplete(this.XmlHttp.responseText,this.XmlHttp.responseXML);
            }
            else
            ...{
                this.OnError(this.XmlHttp.status,this.XmlHttp.statusText,this.XmlHttp.responseText);
            }
        }
    }
     // ******************************************************************************************
     // ********************之上的内容可以放在一个单独的js文件里。********************************
     function  createRequest()
     ... {
        var name = document.getElementById("name").value;
        var cbo = new CallBackObject();
        cbo.OnComplete = CBO_Complete;
        cbo.OnError = CBO_Error;
        cbo.DoCallBack("ajax.aspx?name="+name);//不要丢掉这里的“=”
    }
     function  CBO_Complete(responseText,responseXML) // 完善响应处理函数
     ... {
        alert(responseText);
    }
     function  CBO_Error(responseText,responseXML)
     ... {
        alert(responseText);
    }
     </ script >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         & nbsp; < input id = " name "  type = " text "   />
         < input id = " btn "  type = " button "  value = " button "  onclick = " javascript:createRequest() " /></ div >
     </ form >
</ body >
</ html >

 以下是接受客户端请求的页面的cs文件，就收请求后，处理，并向客户端返回响应。

 

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  ajax : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{
        string name = HttpContext.Current.Request.QueryString["name"];
        string str = "您输入的内容是"+name;
        HttpContext.Current.Response.Clear();
        HttpContext.Current.Response.Write(str);
        HttpContext.Current.Response.Flush();
        HttpContext.Current.Response.End();
    }
}