ajax简单示例

了解Ajax是如何把上述技术结合起来的最好方法是学习一个简单的示例程序。既然这样，假定你有一个客户端应用程序，它使用JavaScript和XMLHttpRequest对象向服务器发送请求，以得到两个整数的和。当用户在客户端的两个文本框中分别输入两个整数时，页面向服务器发送请求将这两个整数相加，并将返回值显示在第三个文本框中。下图显示了这个应用程序运行时的界面。

 使用Ajax技术实现加法功能的客户端页面

可以按照如下步骤创建这个客户端页面：在Visual Studio 2005中建立一个新的网站，然后编辑网站中默认的Default.aspx页面的内容，使其如代码清单1-1所示。

代码清单1-1  创建第一个Ajax应用

当这个页面装载完成时，createXMLHttpRequest函数将被调用（由body标签的onload=指定）以初始化XMLHttpRequest对象。在这以后，每次用户在文本框A或B中按下按键，updateTOT函数都将被调用（通过捕捉onkeyup事件）。

updateTOT函数从表单中取得A与B的值，并使用它们构建出查询Default2.aspx的URL，这个URL将类似于Default2.aspx?A=8&B=3这种形式。然后调用XMLHttpRequest对象的open方法，传递给其上述URL，并指定该请求将以异步的形式发送。然后指定了dotheupdate函数作为该XMLHttpRequest对象状态变化时调用的函数。

dotheupdate函数检查readyState的值是否为4，它标志着这次请求/响应是否已经完成。如果readyState的值为4，dotheupdate函数将使用XMLHttpRequest对象的返回值更新TOT中的文字。

还需要在项目中添加一个新的C# Web Form以完成这个应用。保留这个C# Web Form的默认的名称：Default2.aspx.在页面设计器中，删除所有缺省的HTML代码，这样页面中只包含了ASPX声明：

    protected void Page_Load(object sender, EventArgs e)
    {
        int a = 0;
        int b = 0;
        if (Request.QueryString["A"] != null)
        {
            a=Convert.ToInt32(Request.QueryString["A"].ToString());
        }
        if (Request.QueryString["B"] != null)
        {
            b = Convert.ToInt32(Request.QueryString["B"].ToString());
        }
        Response.Write(a + b);
    }