AJAX的一个简单实例

来源：互联网发布：linux系统ping命令编辑：程序博客网时间：2024/06/11 10:20

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);
    }
}

运行的效果图：

AJAX简单实例效果图

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

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);