搜索的ajax代码,Ajax动态搜索代码

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

习.

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

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

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

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

一个简单的Ajax应用

var xmlHttp

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;

}

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

   这个是数据库的连接脚本文件

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("

• ")

while not rs.eof

response.Write("

" & replacetext(rs("title"),searchtext) & "")  ´输出查询的结果

rs.movenext

wend

response.Write("

")

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),"" & sear(i) & "")

next

replacetext=text

end function

%>

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

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

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

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

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

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

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