AJAX的一个简单实例

Default.aspx全部代码：

 

<% @ Page Language = " C# "  AutoEventWireup = " true "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.1//EN "   " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head runat = " server " >
     < title > Default </ title >
     < script language = " javascript "  type = " text/javascript " >
        var xmlHttp;
        
        function createXMLHttpRequest()
        {
             // 判断浏览器类型并创建对象
             // IE
             if  (window.ActiveXObject)
            {
                xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
            }
             // FF
             else   if  (window.XMLHttpRequest)
            {
                xmlHttp  =   new  XMLHttpRequest();
            }
        }
        
         // 光标处于输入框时引发的动作
        function updateTotal()
        {
            url  =   " Default2.aspx?A= "   +  form1.elements[ " A " ].value  +   " &B= "   +  form1.elements[ " B " ].value;
            xmlHttp.open( " GET " ,url, true );
            xmlHttp.onreadystatechange  =  doUpdate;
            xmlHttp.send();
             return   false ;
        }
        
        function doUpdate()
        {
             if  (xmlHttp.readyState  ==   4 )
            {
                document.forms[ 0 ].elements[ " TOT " ].value  =  xmlHttp.responseText;
            }
        }
     </ script >
</ head >
< body onload  =   " createXMLHttpRequest(); " >
     < form id = " form1 "  action  =   "" >
         < div >
             < p >
             < input type  =   " text "  id = " A "  onkeyup  =   " updateTotal() "  value  =   " 0 " />
             < input type  =   " text "   id = " B "  onkeyup  =   " updateTotal() " /  value  =   " 0 "   />
             </ p >
             < p >
             < input type  =   " text "   id = " TOT "   />          
             </ p >
             </ div >
     </ form >
</ body >
</ html >

 

Default2.aspx全部代码(仅保留页面声明)：

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

 

Default2.aspx.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  Default2 : System.Web.UI.Page
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         int  a  =   0 ;
         int  b  =   0 ;
         if  (Request.QueryString[ " A " ]  !=   null )
        {
            a  =  Convert.ToInt16( Request.QueryString[ " A " ].ToString());
        }
         if  (Request.QueryString[ " B " ]  !=   null )
        {
            b  =  Convert.ToInt16( Request.QueryString[ " B " ].ToString());
        }
        Response.Write(a  +  b);
    }
}

 

运行的效果图：

 

===============  原理说明 =============

MSXML中提供了Microsoft.XMLHTTP对象，能够完成从数据包到Request对象的转换以及发送任务。
创建XMLHTTP对象的语句如下：

var Http = new ActiveXObject("Microsoft.XMLHTTP");

对象创建后调用Open方法对Request对象进行初始化，语法格式为：
 
Http .open (http-method, url, async, userID, password);

Open方法中包含了5个参数，前三个是必要的，后两个是可选的(在服务器需要进行身份验证时提供)。参数的含义如下所示：
 
http-method：  HTTP的通信方式，比如GET或是 POST
url：   接收XML数据的服务器的URL地址。通常在URL中要指明 ASP或CGI程序
async：  一个布尔标识，说明请求是否为异步的。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作
userID:  用户ID，用于服务器身份验证
password: 用户密码，用于服务器身份验证

XMLHTTP对象的Send方法

用Open方法对Request对象进行初始化后，调用Send方法发送请求：

Http .send()

Send方法的参数类型是Variant，可以是字符串、DOM树或任意数据流。发送数据的方式分为同步和异步两种。在异步方式下，数据包一旦发送完毕，就结束Send进程，客户机执行其他的操作；而在同步方式下，客户机要等到服务器返回确认消息后才结束Send进程。
XMLHTTP对象中的readyState属性能够反映出服务器在处理请求时的进展状况。客户机的程序可以根据这个状态信息设置相应的事件处理方法。属性值及其含义如下表所示：
值 说明

0 Response对象已经创建，但XML文档上载过程尚未结束
1 XML文档已经装载完毕
2 XML文档已经装载完毕，正在处理中
3 部分XML文档已经解析
4 文档已经解析完毕，客户端可以接受返回消息

客户机处理响应信息
客户机接收到返回消息后，进行简单的处理，基本上就完成了C/S之间的一个交互周期。客户机接收响应是通过XMLHTTP对象的属性实现的：

responseTxt：将返回消息作为文本字符串;
responseXML：将返回消息视为XML文档，在服务器响应消息中含有XML数据时使用；
responseStream：将返回消息视为Stream对象

------一个很简单的javascript例子，将获取XML文本生成字XMLDOM对象---------------

var Http = new ActiveXObject("Microsoft.XMLHTTP");
var url='getItemXml.jsp?id=1';//该页从数据库里询数并生成返回规范的xml文本
Http.open("POST",url,false);
Http.send();
var xmldoc=new ActiveXObject("MSXML.DOMDocument");
xmldoc.async=false;
xmldoc.loadXML(Http.responseText);