众所周知,如果没有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的面貌,掌握其基本原理,实现更多更好的效果,让用户得到更完美的体验。