也谈AJAX

来源：互联网发布：淘宝天猫超市怎么投诉编辑：程序博客网时间：2024/04/29 13:48

看着Ajax在网络上热闹非凡，偶也来凑个热闹，找了些资料，看了些书籍，算是知道一些，于是乎，就也来发表点愚见。

众所周知，如果没有XMLHttpRequest的支持，Ajax也就不会有今天的发展。所以在开始前有必要介绍一下XMLHttpRequest。对XMLHttpRequest最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

XmlHttp对象参考：

属性：

onreadystatechange* 指定当readyState属性改变时的事件处理句柄。只写 readyState 返回当前请求的状态，只读. responseBody 将回应信息正文以unsigned byte数组形式返回.只读 responseStream 以Ado Stream对象的形式返回响应信息。只读 responseText 将响应信息作为字符串返回.只读 responseXML 将响应信息格式化为Xml Document对象并返回，只读 status 返回当前请求的http状态码.只读 statusText 返回当前请求的响应行状态，只读

* 表示此属性是W3C文档对象模型的扩展.

方法：

abort 取消当前请求 getAllResponseHeaders 获取响应的所有http头 getResponseHeader 从响应信息中获取指定的http头 open 创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码) send 发送请求到http服务器并接收回应 setRequestHeader 单独指定请求的某个http头

有了以上的基础，我们就来用Ajax实现一个简单的无刷新二级菜单。

AjaxTest.aspx

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

<!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>AjaxTest By 千山</title>
    <script type="text/javascript">
        var xmlHttp;//定义全局变量 xmlHttp
        function createXmlHttp()
        {
            //创建xmlHttp
            if(window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        function provinceChange()
        {
　　  createXmlHttp();
　　  xmlHttp.onreadystatechange = callBack;
　　  xmlHttp.open("GET","AjaxTest.aspx?provinceID="+document.getElementById("ddlProvince").value+"",false)
　　     xmlHttp.send("");
        }
        function callBack()
        {
            var result;
            if(xmlHttp.readyState == 4)
            {
                //readyState 有5个可取值:0=未初始化，1=正在加载，2=已加载，3=交互完成，4=完成
                if(xmlHttp.Status == 200)
                {
                    //Status 服务器的HTTP状态码 200对应OK，404对应Not Found，等等
                    result = xmlHttp.responseText;//得到服务器返回的city值，处理后加到ddlCity中，实现无刷新加载
                    document.getElementById("ddlCity").length=0;
　　　　   var city = result.split(",");
　　　　   for(var i=0;i<city.length;i++)
　　　　   {
　　　　　　      document.getElementById("ddlCity").options.add(new Option(city[i].toString(),city[i].toString()));
　　　　   }
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlCity" runat="server" Style="z-index: 100; left: 374px; position: absolute;
            top: 138px">
        </asp:DropDownList>
        <asp:DropDownList ID="ddlProvince" runat="server" Style="z-index: 101; left: 238px;
            position: absolute; top: 139px">
        </asp:DropDownList>
           

    </div>
    </form>
</body>
</html>

AjaxTest.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 AjaxTest : System.Web.UI.Page
{
    private string provinceId;
    protected void Page_Load(object sender, EventArgs e)
    {

        ProvinceBind();
        ddlProvince.Attributes.Add("onchange", "provinceChange();");
        provinceId = Request.QueryString["provinceID"];
        if (provinceId != "" && provinceId != null)
        {
            //当provinceId有值是调用CityBind();返回city值
            CityBind();
        }
    }

    private void ProvinceBind()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("provinceID");
        dt.Columns.Add("provinceName");
        DataRow row1 = dt.NewRow();
        row1["provinceID"] = "1";
        row1["provinceName"] = "四川";
        dt.Rows.Add(row1);
        DataRow row2 = dt.NewRow();
        row2["provinceID"] = "2";
        row2["provinceName"] = "云南";
        dt.Rows.Add(row2);
        DataRow row3 = dt.NewRow();
        row3["provinceID"] = "3";
        row3["provinceName"] = "北京";
        dt.Rows.Add(row3);
        ddlProvince.DataSource = dt;
        ddlProvince.DataValueField = "provinceID";
        ddlProvince.DataTextField = "provinceName";
        ddlProvince.DataBind();

}

    #region 通过传来的provinceId得到对应的城市列表，以下数据源为自己构造的DataTble,同理，可以通过数据库查询得到
    private void CityBind()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("provinceID");
        dt.Columns.Add("cityName");
        DataRow row1 = dt.NewRow();
        row1["provinceID"] = "1";
        row1["cityName"] = "成都";

        DataRow row2 = dt.NewRow();
        row2["provinceID"] = "1";
        row2["cityName"] = "西昌";

        DataRow row3 = dt.NewRow();
        row3["provinceID"] = "2";
        row3["cityName"] = "昆明";

        DataRow row4 = dt.NewRow();
        row4["provinceID"] = "2";
        row4["cityName"] = "大理";

        DataRow row5 = dt.NewRow();
        row5["provinceID"] = "3";
        row5["cityName"] = "北京";

        if (provinceId == "1")
        {
            dt.Rows.Add(row1);
            dt.Rows.Add(row2);
        }
        else if (provinceId == "2")
        {
            dt.Rows.Add(row3);
            dt.Rows.Add(row4);
        }
        else if(provinceId=="3")
            dt.Rows.Add(row5);
        string city=null;
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            city += dt.Rows[i][1].ToString() + ",";
        }
        city = city.Substring(0, city.Length - 1);
        Response.Write(city);
        Response.End();//把这一句去掉试试？因为我们只需要通过xmlHttp得到城市列表，所以当打印出城市列表过后就结束

}
#endregion
}

以上是一个简单的列子，通过这个列子我们可以简单的窥伺ajax的面貌，掌握其基本原理，实现更多更好的效果，让用户得到更完美的体验。