这节将使用jQuery UI的Autocomplete方法实现文本框的自动搜索填充功能，并且这里会使用另外一个方法来实现AJAX调用服务器方法，就是通过ASP.NET HTTP handler来处理请求的数据。现在就来看下实现的步骤：
1.创建SearchKeys.ashx请求处理文件，并实现以下代码：
<%@ WebHandler Language="C#" Class="SearchKeys" %>
using System;
using System.Web;
// 添加两个命名空间
using System.Collections.Generic;
using System.Web.Script.Serialization;
public class SearchKeys : IHttpHandler {
/// <summary>
/// 根据关键字过滤内容
/// </summary>
/// <param name="keyword">关键字</param>
/// <returns>过滤数组</returns>
private string[] GetFilteredList(string keyword)
{
List<string> countryList = new List<string>();
countryList.Add("阿联酋");
countryList.Add("阿富汗");
countryList.Add("阿尔巴利亚");
countryList.Add("阿鲁巴");
countryList.Add("巴西");
countryList.Add("亚美利亚");
countryList.Add("西班牙");
List<string> filteredList = new List<string>();
foreach (string sCountry in countryList)
{
// 判断是否包含关键字的国家，然后加入到过滤后的集合中。
if (sCountry.Contains(keyword))
{
filteredList.Add(sCountry);
}
}
// 返回数组，以便后面能序列化为JSON格式数据
return filteredList.ToArray();
}
public void ProcessRequest(HttpContext context)
{
string keyword = context.Request.QueryString["keyword"];
if (keyword != null)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
// 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串
string jsonString = serializer.Serialize(GetFilteredList(keyword));
context.Response.Write(jsonString); // 返回客户端json格式数据
}
}
public bool IsReusable {
get {
return false;
}
}
}
2.创建页面文件Recipe25.aspx,页面代码(HTML部分)如下：
<body>
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 100px;">
<table border="0" cellpadding="3" cellspacing="3">
<tr>
<td>
<asp:Label ID="lblCountry" runat="server">国家：</asp:Label>
</td>
<td>
<asp:TextBox ID="txtSearch" runat="server" Width="150px"></asp:TextBox>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
3.页面文件Recipe25.aspx的脚本代码实现如下：(如何获取和引入jQuery UI已经在前面章节讲过，这里就不用重复了)
<link type="text/css" rel="Stylesheet" href="../Styles/sunny/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txtSearch").autocomplete({
minLength: 1, // 设置搜索的关键字最小长度
// 设置自动完成列表的函数，函数包括两个参数，requset和response
source: function (request, response) {
$.ajax({
type: "POST",
// 通过request.term可以获得文本框内容
url: "SearchKeys.ashx?keyword=" + request.term,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
// jQuery.map(array, callback) :将一个数组中的元素转换到另一个数组中。
// 下面就是把数组["value1", "value2",...]转换为[{value:"value1"}, {value:"value2"},...]
response($.map(data, function (item) {
return { value: item };
}));
},
error: function () {
alert("ajax请求失败");
}
});
}
});
});
</script>
4.实现效果图：
5.分析XmlHttpRequest对象，请求参数和响应数据如下：
这节主要内容是通过AJAX调用页面后台代码方法实现下拉框二级联动效果，实现步骤如下：
1.创建文件Recipe24.aspx,实现后台代码如下：
// 引入命名空间
using System.Web.Services;
// 实现下拉框二级联动AJAX请求加载数据方法
[WebMethod()]
public static ArrayList GetSubList(string sBuyID)
{
ArrayList subList = new ArrayList();
if (sBuyID == "1")
{
subList.Add(new ListItem("文艺", "1"));
subList.Add(new ListItem("少儿", "2"));
subList.Add(new ListItem("人文社科", "3"));
subList.Add(new ListItem("科技", "4"));
}
else if (sBuyID == "2")
{
subList.Add(new ListItem("手机通讯", "1"));
subList.Add(new ListItem("手机配件", "2"));
subList.Add(new ListItem("摄影摄像", "3"));
subList.Add(new ListItem("数码配件", "4"));
}
return subList;
}
2.实现页面代码(HTML部分)如下：
<body>
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 150px;">
<table border="0" cellpadding="10" cellspacing="10">
<tr>
<td>
<asp:DropDownList ID="buyList" runat="server" Width="120px">
<asp:ListItem Value="0" Text=" --- 请选择 --- "></asp:ListItem>
<asp:ListItem Value="1" Text="图书"></asp:ListItem>
<asp:ListItem Value="2" Text="手机数码"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:DropDownList ID="subList" runat="server" Width="120px">
<asp:ListItem Value="0" Text=" --- 请选择 --- "></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
3.实现脚本代码如下：
<script type="text/javascript">
$(function () {
$("#buyList").bind("keyup change", function (e) {
e.preventDefault();
// 首先初始化
$("#subList").empty().append($("<option></option>").val("0").html(" --- 请选择 --- "));
if ($(this).val() != "0") {
sendData($(this).val());
}
});
function sendData(sBuyID) {
var loc = window.location.href;
$.ajax({
type: "POST",
url: loc + "/GetSubList", // 调动后台页面方法
data: '{"sBuyID":"' + sBuyID + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// msg.d是数组，由后台数组ArrayList返回，因此可以遍历每个元素
$.each(msg.d, function () {
// this.Value和this.Text是后台返回数组ArrayList类型包含元素ListItem类型的属性
$("#subList").append($("<option></option").val(this.Value).html(this.Text));
});
},
error: function () {
alert("ajax请求发生错误");
}
});
}
});
</script>
4.下拉框二级联动效果图：
5.分析XmlHttpRequest对象，可看到请求响应的数据msg.d的结构如下（通过下图就知道msg.d的每个元素为什么会有Text和Value属性了）：
今天发现一个问题，就是以上代码如果在VS2005建立的项目里面运行，AJAX会报JSON对象错误，但在VS2010项目里面运行正常，一直没找到原因，哪位高手如果知道其原因，请告知，谢谢。
这节我们来看下如何实现AJAX调用页面后台方法和web服务定义的方法，下面通过验证用户的例子，先讲解如何调用页面后台方法，具体实现步骤如下：
1.新建Recipe23.aspx页面。
2.在该页面的后台文件Recipe23.aspx.cs中添加引用
using System.Web.Services;
3.定义静态数组和初始化数据
public static string[] userNameArrray;
protected void Page_Load(object sender, EventArgs e)
{
userNameArrray = new string[5] { "KenLee01", "KenLee02", "KenLee03", "KenLee04", "KenLee05" };
}
4.定义验证用户名合法性的静态方法
/// <summary>
/// 验证用户是否合法
/// </summary>
/// <remarks>
/// AJAX如果要直接调用该方法，需要添加[WebMethod()]，并定义为静态方法
/// </remarks>
/// <param name="sUserName">用户名</param>
/// <returns>返回结果</returns>
[WebMethod()]
public static bool CheckUserName(string sUserName)
{
// 如果用户存在，就验证合法
if (userNameArrray.Contains(sUserName))
{
return true;
}
return false;
}
5.在Recipe.aspx里面实现界面结构代码如下
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
<asp:Button ID="btnCheck" runat="server" Text="验证用户" />
</div>
</form>
6.在Recipe.aspx里面实现AJAX调用页面后台用户验证方法CheckUserName的脚本代码如下
<script type="text/javascript">
$(function () {
$("#btnCheck").click(function (e) {
e.preventDefault();
// 首先判断用户名是否为空，并给出提示
if ($("#txtUserName").val() == "") {
alert("请输入用户名！");
}
else {
sendData($("#txtUserName").val());
}
});
// 定义一个AJAX请求方法
function sendData(sUserName) {
// 访问页面后台方法
var loc = window.location.href;
$.ajax({
type: "POST",
url: loc + "/CheckUserName",
// sUserName要跟请求方法CheckUserName定义的参数名称要保持一致
// json数据格式是由一对键值构成，如{"name1":"value1", "name2":"value2"}
data: '{ "sUserName": "' + sUserName + '"}',
// 发送信息至服务器时内容编码类型
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// AJAX响应被包装到一个d对象里，如{"d":true},
// 因此需要用到msg.d来获取请求返回的布尔值
if (msg.d) {
alert("验证用户成功！");
}
else {
alert("验证用户失败！");
}
},
error: function (xhr, textStatus, errorThrown) {
alert("AJAX错误：" + errorThrown);
}
});
}
});
</script>
7.运行程序后显示页面如下：
8.输入用户名KenLee10:
9.输入用户名KenLee01:
10.还可以通过Firebug观察AJAX请求响应的数据，请求数据如下：
11.请求响应的JSON数据：
下面再来看下AJAX如何调用Web服务：
1.创建Web服务用户验证的文件UserNameWS.asmx，必须添加[System.Web.Script.Services.ScriptService]，实现用户验证代码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
///UserNameWS 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class UserNameWS : System.Web.Services.WebService {
public UserNameWS () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
/// <summary>
/// 验证用户是否合法
/// </summary>
/// <remarks>
/// AJAX如果要直接调用该方法，需要添加[WebMethod()]，并定义为静态方法
/// </remarks>
/// <param name="sUserName">用户名</param>
/// <returns>返回结果</returns>
[WebMethod]
public bool CheckUserName(string sUserName)
{
string[] userNameArrray = new string[5] { "KenLee01", "KenLee02", "KenLee03", "KenLee04", "KenLee05" };
// 如果用户存在，就验证合法
if (userNameArrray.Contains(sUserName))
{
return true;
}
return false;
}
}
2.修改Recipe23.aspx的脚本代码sendData函数,只需修改loc访问地址：
// 定义一个AJAX请求方法
function sendData(sUserName) {
// 访问页面后台方法
// var loc = window.location.href;
// 访问Web服务
var loc = "UserNameWS.asmx";
........
简单完成上面两步，就可以直接调用web服务里面定义的方法了。具体显示的效果图，和上面介绍的AJAX访问页面方法的效果图是一样的，这里就不用重复写了。
从这章开始，我们将开始讲解jQuery的AJAX相关的内容，首先需要大家自己先百度google了解下AJAX的原理，然后再来看这里的内容，就轻松很多了。
基本方法使用
jQuery 提供了很多AJAX方法，这里主要用到以下两个方法：
1.$.ajax(settings)：它是一个底层方法，可以帮助我们创建各种类型的AJAX请求。该方法可以自定义设置多种参数类型以供AJAX调用，如可以设置HTTP请求(GET/POST)，访问的URL，请求类型(html,json等)，成功或失败的回调函数等。
2.$.ajaxSetup(options)：该方法帮助我们设置页面请求AJAX的默认参数值，只要设置一次，其他请求AJAX都可以使用这个默认参数值,相当于设置全局变量。
通过下面的例子可以基本掌握以上两个方法的使用，该例子通过jQuery AJAX方法请求Content.hml页面，返回该页面的内容，并显示在当前请求页面上，具体实现细节如下：
首先创建一个Content.htm页面文件，代码如下：
<!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>
<title>软件书籍目录清单</title>
<style type="text/css">
#tbooks
{
color: White;
font-weight: bold;
font-size: 12pt;
font-family: Arial, Sans-Serif;
}
#tbooks tr
{
background-color: Gray;
}
</style>
</head>
<body>
<table border="0" cellpadding="3" cellspacing="3" id="tbooks">
<tr>
<td>
你就是极客！
</td>
<td>
软件开发人员生存指南
</td>
</tr>
<tr>
<td>
人件集
</td>
<td>
人性化的软件开发
</td>
</tr>
</table>
</body>
</html>
再创建请求页面Recipe22.aspx，页面结构代码如下：
<body>
<form id="form1" runat="server">
<div align="center">
<fieldset style="width: 400px; height: 100px;">
<div id="contentArea">
<asp:Button ID="btnLoadContent" runat="server" Text="加载软件书籍目录" />
</div>
</fieldset>
</div>
</form>
</body>
请求AJAX之前页面显示效果：
实现AJAX请求的脚本代码如下：
<script type="text/javascript">
$(function () {
// 通过ajaxSetup设置默认值
$.ajaxSetup({
cache: false, // 关闭缓存确保浏览器不会缓存当前页面内容
dataType: "html", // 设置请求服务的返回数据类型，这里我们加载一个html文件
// 请求失败时调用此函数,该函数自带三个参数，XMLHttpRequest对象，错误状态和错误对象
error: function (xhr, status, error) {
alert("当前错误：" + error);
},
timeout: 30000, // 设置请求超时时间（毫秒）
type: "GET", // 请求方式 ("POST" 或 "GET")
beforeSend: function () { // 发送请求前可修改XMLHttpRequest对象的函数
console.log("AJAX请求前触发beforeSend事件");
},
complete: function () { // 请求完成后回调函数 (请求成功或失败之后均调用)
console.log("AJAX请求完成后触发complete事件");
}
});
$("#btnLoadContent").click(function (e) {
e.preventDefault();
// 通过AJAX调用Content.htm页面内容
$.ajax({
url: "Content.htm", // 发送请求的地址
// 定义一个返回成功的函数，data参数表示从服务器返回的数据
success: function (data) {
// 这里返回了Content.htm页面的元素内容，
// 如果不太清楚data到底传的是什么内容，待会儿讲解调试的时候，会看到data的真实值
$("#contentArea").html("").html(data);
}
});
});
});
</script>
请求AJAX之后页面显示效果：
调试技巧
接下来，我们再来看下如何调试上面的例子。现在很多浏览器都有自己的调试工具，来调试html,css,javascript代码。例如现在IE8以上的版本，可以通过F12调出开发者工具来调试，Chrome浏览器也同样可以通过Control+Shift+I调出开发者工具，然后这里我将介绍一个我经常用到的调试工具，就是FireFox浏览器的Firebug调试工具插件。
首先下载并安装该插件，访问地址：http://getfirebug.com.
然后通过FireFox浏览器运行Recipe22.aspx，并通过F12调出Firebug，如下图：
现在我们就可以通过Firebug一步一步来跟踪AJAX的请求/返回。
1.点击加载软件书籍目录按钮，结果会加载显示访问页面的内容。
2.点击Firebug窗口的控制台分页，这个窗口会显示AJAX事件beforeSend和complete定义的函数里面控制台执行log方法的代码，而且还会显示请求访问的url.如下图所示：
Firebug的控制台支持以下的调用方法：
♦ console.log
♦ console.debug
♦ console.error
♦ console.info
♦ console.warning
3.更改$.ajaxSetup里面的complete事件定义的函数如下：
complete: function () { // 请求完成后回调函数 (请求成功或失败之后均调用)
console.log("AJAX请求完成后触发complete事件--log消息");
console.debug("AJAX请求完成后触发complete事件--debug消息");
console.error("AJAX请求完成后触发complete事件--error消息");
console.info("AJAX请求完成后触发complete事件--info消息");
console.warning("AJAX请求完成后触发complete事件--warning消息");
}
再次跟踪查看控制台如下：
4.现在我们再来看下Firebug窗口的网络分页，这个页面可以跟踪查看网络资源，如HTML,CSS,JS,XHR(XmlHttpRequest),图片,Flash和媒体。现在我们点击XHR子分页栏，我们会看到URL,状态,域,请求数据大小,远程IP和请求时间。
同时打开URL，还可以看到对应的子项目内容:
参数：访问URL的键值参数（注意：_ 1329150564101是$.ajax方法默认添加的参数，用来控制浏览器缓存。每一次请求，$.ajax方法都会生成一个新的默认键值，保证每次用户都是新的请求而且不需要缓存返回的内容。）
头信息：显示请求/返回的头信息。
响应：显示AJAX请求返回的内容，包括JSON，HTML，XML，TEXT和SCRIPT。
缓存：显示缓存的一些细节。
HTML: 通过HTML显示返回的内容。
单击响应子分页栏，将会显示AJAX访问Content.htm页面返回的HTML内容：
（注意：这里就是调用$.ajax方法success事件定义函数的data参数返回的内容)
再来看下点击HTML子分页栏，将会通过HTML显示AJAX请求返回的内容：
好了，通过以上内容的讲解，相信你已经对jQuery的AJAX使用有了基本的认识，而且也学会了基本的调试技巧。
在后面的章节，将会介绍更多jQuery AJAX在ASP.NET中的使用方法。