Ajax动态搜索代码

关注+2009-12-21作者：

最近开始学习 Ajax，还不是太明白，先写了一个小的Ajax应用来了解一下Ajax的工作方式，以便进一步学

习.

在Ajax中请求数据有两种方式：GET和POST，在这里我选了一种比较简单的GET方式.要实现一个在线搜索的

功能，就是用户输入信息以后，动态的进行内容的搜索.及时把数据从服务器端发送到客户端.并对要进行

搜索的数据进行突出显示.

下面是Ajax客户端代码，这个界面是显示给用户的：

<html>
<head>
<title>一个简单的Ajax应用</title>

function showCustomer(str)　//str为要发送的数据
{
xmlHttp=dvajax_init_object();
if (xmlHttp==null)
{
alert ("您的浏览器不支持AJAX！");
return;
}
var url="ajax.asp"; //处理Ajax请求的脚本程序页面
url=url+"?uname="+escape (str); //传递的参数，为了防止出现乱码，在这里用了escape这个函数对数

据进行统一的编码.
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true); //用GET方式发送数据
xmlHttp.send(null);
}

//Ajax请求状态检查函数

function stateChanged()
{
if (xmlHttp.readyState==4)　//状态为4说明执行成功，把数据放到Result这个Div中
{
document.getElementById("result").innerHTML=xmlHttp.responseText;
}
if (xmlHttp.readyState==1) //状态为1时正在执行
{
document.getElementById("result").innerHTML="正在加载...";
}
}

//编写创建Ajax对象的函数.
function dvajax_init_object() {
var RetValue;
try {
   RetValue = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  try {
  RetValue = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (oc) {
  RetValue = null;
  }
}
if(!RetValue && typeof XMLHttpRequest != "undefined")
  RetValue = new XMLHttpRequest();
  if (RetValue)
  return RetValue;
}
</script>
</head>

</body>
</html>

有了用户界面还不行，还要有数据处理的服务器端页面.下面是服务器端页面的处理代码：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
 这个是数据库的连接脚本文件
<%
response.Expires=-1　
response.Charset="gb2312" 　　　 ´在这里要设置输出的字符编码为GB2312中文编号，防止出现

乱码
set rs=server.CreateObject("adodb.recordset") ´创建记录集对象
set connect=server.CreateObject("adodb.connection") ´创建数据库连接对象
connect.open conndata ´打开数据库连接

dim searchtext
´对多关键字搜索进行支持，这里的关键字用空格分开，先取得传来的值，之后对其进行处理

searchtext=trim(replace(request.QueryString("uname"),"´",""))
searchtext=replace(searchtext," ",",")
searchtext=replace(searchtext,"　",",")

if searchtext<>"" then

text1=split(searchtext,",") ´把要搜索的数据分割成数组，之后用循环语句生成要执行的SQL语句
sql="select top 10 title from test where title like ´%" & text1(0) & "%´"
for i= 1 to ubound(text1)
sql=sql & "and smt_coname like ´%" & text1(i) &"%´"
next

rs.open sql,connect,1,1
if not rs.eof and not rs.bof then
response.Write("<ul>")
while not rs.eof
response.Write("<li>" & replacetext(rs("title"),searchtext) & "</li>") ´输出查询的结果
rs.movenext
wend
response.Write("</ul>")
else
response.Write("没有符合的记录")
end if
rs.close
set rs=nothing
connect.close
set connect=nothing ´关闭记录集和数据库连接对象
else
response.Write("没有符合的记录")
end if

´定义函数对搜索的内容进行突出显示

function replacetext(text,searchtext)
sear=split(searchtext,",")
for i=0 to ubound(sear)
text=replace(text,sear(i),"<font color=´blue´><b>" & sear(i) & "</b></font>")
next
replacetext=text
end function
%>

上面就是服务器端的数据处理代码了，我把它保存为Ajax.asp文件，也就是上面的客户界面中Ajax对象请

求的页面了，Ajax把请求的结果放到ID为result的这个Div容器中.

这样就做了一个简单的Ajax搜索，我们可以打开页面测试，测试时只要在文本框中输入内容，就会把相关

的内容在下面进行输出，并把搜索的内容进行突出显示.

注：Ajax应用中容易出现乱码，为了防止乱码的出现，所以我们在这里有两处要注意，一个是Ajax传递参

数时要用js的escape函数对要传输的值进行统一编码，另一个是ASP文件中对内容输出之前要用Response对

象输出编码为GB2312，response.Charset="gb2312"，这样一般来说就可以避免乱码的出现了.此方法兼容