上篇博客讨论了DOM的基本使用情况，DOM树使得程序员能够直接在后台来操作HTML元素，熟练的使用DOM并集合AJAX能够构造出网页应用程序。今天进一步使用AJAX来实现一些复杂的功能，主要来讨论使用AJAX实现异步模糊查询的功能。
一、查漏补缺
对于AJAX属性也许您已经不再陌生，因为上篇博客已经对属性和方法进行了初步的讨论，而且通过实例来运用了属性和方法，今天来更深入的来介绍下AJAX的属性的使用方法。
1、属性讲解
onreadystatechange是AJAX很重要的一个属性，直译为请求状态改变，它封存了处理服务器响应的函数，也就是我们通常所说的注册回调函数。在向服务器请求数据时，首先要执行该函数，在每次执行完请求操作后都会重新执行该属性方法。在编写浏览器脚本时通常使用如下的代码：
xmlHttp.onreadystatechange=function()
{
//我们往往这样写这里的代码
if(XMLHttp.readyState==4)//判断请求操作是否执行完成
{
if(XMLHttp.status==200) //执行完成后是否正确返回数据
showDiv.innerHTML=XMLHttp.responseText;
}
}
在上面的代码示例中创建了XMLHTTPRequest对象，并为该对象注册了回调函数，另外还有两个属性readyState和status两个属性没有说到，下面将会进行深入的讨论。那首先来看看readyState属性吧。
readyState属性封存了服务器响应的信息，每当 readyState改变时，onreadystatechange函数就会被执行。你也许会问为什么要判断该属性，那说明你对该属性没有深刻的认识，使用该属性能够时刻监视返回请求的状态，清楚的了解请求所进行到的步骤。在客户端发出请求后会服务器会不断的向客户端发出数据，每次返回数据该属性的值都会发生变化，如下表是readyState的可能值。
另外对于status属性，封存了服务器返回的http状态码，如我们经常所见的404，500等，它们分别代表了不同的返回信息。其中200表示“成功”，404表示“未找到”，500表示“服务器内部错误”。如果想要了解更多它的使用方法的话，那就多加应用该属性吧。
二、模糊查询
上面对AJAX的几个常用的属性做了更深刻的讨论，目的是为了能够更便利的使用属性来编程，接下来做了一个模糊查询的Demo，使用AJAX异步查询来查询获取某个关键字的匹配内容。
清单一：客户端html代码，下面的代码示例分别创建了一个文本框和一个div标签，文本框中用来输入内容，div中来显示查询到的匹配内容。其中请求的服务器脚本使用了一般处理程序完成的，并没有为发送的内容进行编码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
debugger;
function GetData()
{
var showDiv=document.getElementById ("divTest");
var ctest=document.getElementById ("txtTest").value;
var XMLHttp=false;
showDiv.innerHTML="";
if(window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest();
}
if(!XMLHttp && typeof XMLHttpRequest!=‘undefined!‘)
{
XMLHttp=new XMLHttpRequest();
}
XMLHttp.onreadystatechange=function()
{
if(XMLHttp.readyState==4)
{
if(XMLHttp.status==200)
showDiv.innerHTML=XMLHttp.responseText;
}
}
var url="Process.ashx?name="+escape(ctest)+"&id="+Math.random();//在URL后加一个随机数 防止缓存
XMLHttp.open("get",url,true);
XMLHttp.setRequestHeader("Content-Type","text/xml");
XMLHttp.send(null);
}
</script>
</head>
<body>
<table>
<tr>
<td><input id="txtTest" onkeyup="GetData()" runat="server" style="width: 85px" type="text" /></td>
<td><div id="divTest" runat="server" style="position:absolute;z-index:1; right: 921px;"></div></td>
</tr>
</table>
</body>
</html>
清单二：Process.ashx服务器端一般处理程序的内部处理代码。这里在数据库使用了like查询到和输入内容类似的值，并将值插入到html表中返回给客户端，最后通过showDiv.innerHTML来将数据插入到HTML上。
using System;
using System.Collections.Generic;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text;
namespace WebApplication4
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Process : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/xml";
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("server=.;DataBase=MyBlog;uid=sa;pwd=1;"))
{
con.Open(); //打开数据库链接
SqlCommand sqlCom = new SqlCommand(); //声明并创建数据库命令集
StringBuilder sqlStr = new StringBuilder();
sqlStr.Append("select name from match where name like %‘客户端传递的文本‘%");
sqlCom.CommandText = sqlStr.ToString();
sqlCom.Connection = con;
SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCom);
SqlCommandBuilder sqlBuilder = new SqlCommandBuilder(sqlDa);
sqlDa.Fill(dt);
}
StringBuilder strBuild = new StringBuilder();
strBuild.Append("<table>");
if (dt != null && dt.Rows.Count > 0)
{
foreach (DataRow dr in dt.Rows)
{
strBuild.Append("<tr>");
strBuild.AppendFormat("<td>{0}</td>", dr["name"].ToString());
strBuild.Append("</tr>");
}
}
strBuild.Append("</table>");
context.Response.Write(strBuild.ToString());
}
}
}
结语
该篇博客主要是在查漏补缺，因为前几篇博客对AJAX基本的使用属性没有深入的讨论，对几种属性的使用还很模糊，该篇博客主要是为了加深理解。至此AJAX的基本内容已经讨论完成，相信经过这几篇博客的讨论和应用能够熟练使用AJAX来编程是很容易的事情了，接下来要做的是运用，把学到的东西用到实际开发中。