AJAX初体验之实战篇--打造博客无刷新搜索

HotHeart 楼主

如果你对AJAX不是很了解，可以先看看这篇教程的前篇《AJAX初体验之上手篇》。
现在博客很流行，相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友，可能更喜欢自己去下载一个博客程序来架设一个自己的博客，而不是使用一些博客网站提供的服务。而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面，然后在后台生成搜索结果，再呈现给用户，这过程之中浪费了一些带宽，如博客的侧边栏。要节约这一些带宽，我们可以用AJAX来打造自己的无刷新日志搜索。
在本篇教程中，数据库的表名和日志查看页面以L-Blog为例，因为我的博客程序是从L-Blog修改而来^_^。
本教程中的例子已经通过实际测试，可以直接在L-Blog或FBS中使用。当然，要真正应用的话还是需要做一些美化及完善的。
在数据库中日志内容数据表名为blog_Content，其中日志ID为log_ID，日志标题为log_Title，日志查看页面为blogview.asp，参数为日志logID。有了这些资料，就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时，需要显示日志的标题，以及日志的ID来创建到查看日志的链接。
搜索结果模板sample.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <blogsearch>
   
3.         <!-- 每一个reslut就是一个搜索结果 -->
   
4.         <result>
   
5.                 <!-- 日志的ID -->
   
6.                 <logid>1</logid>
   
7.                 <!-- 日志的标题 -->
   
8.                 <logtitle>AJAX初体验之上手篇</logtitle>
   
9.         </result>
   
10. </blogsearch>

复制代码

每个result就是一个搜索结果，为了处理没有找到相关内容的情况，我定义了当搜索结果为空时logid为#。
在完成XML文档模板之后，就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。
搜索结果输出ajaxsearch.asp

1. <!-- #include file="commond.asp" -->
   
2. <!-- #include file="include/function.asp" -->
   
3. <%
   
4. ' commond.asp为数据库连接文件
   
5. ' function.asp中有要用到的函数CheckStr
   
6. Dim Search_Word,XML_Result,rsSearch,sqlSearch
   
7. Set rsSearch=Server.CreateObject("ADODB.RecordSet")
   
8. ' 获取搜索关键字
   
9. Search_Word=CheckStr(Trim(Request.Form("searchword")))
   
10. ' XML文档头
    
11. XML_Result="<?xml version=""1.0"" encoding=""utf-8""?><blogsearch>"
    
12. IF Search_Word<>Empty Then
    
13.         ' 创建查询SQL语句
    
14.         sqlSearch="SELECT log_ID,log_Title,log_Content FROM blog_Content WHERE log_Title LIKE '%"&Search_Word&"%' AND log_IsShow=True ORDER BY log_ID DESC"　
    
15.         ' 打开记录集
    
16.         rsSearch.open sqlSearch,Conn,1,1
    
17.         ' 如果没有搜索结果就产生一个结果，logid为#，标志着没有搜索结果
    
18.         IF rsSearch.BOF AND rsSearch.EOF Then XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"　
    
19.         ' 循环输出搜索结果
    
20.         Do While Not rsSearch.EOF
    
21.                 ' 循环输出每一个结果
    
22.                 XML_Result=XML_Result&"<result><logid>"&rsSearch("log_ID")&"</logid><logtitle><![CDATA["&rsSearch("log_Title")&"]]></logtitle></result>"　  
    
23.                 rsSearch.MoveNext
    
24.         Loop
    
25. Else
    
26.         ' 关键字为空，则返回无搜索结果
    
27.         XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"
    
28. End IF
    
29. XML_Result=XML_Result&"</blogsearch>"
    
30. ' 设置MIME Type为XML文档
    
31. Response.ContentType = "application/xml"
    
32. 'Response.CharSet = "utf-8"
    
33. ' 输出搜索结果
    
34. Response.Write(XML_Result)
    
35. %>

复制代码

有了后台搜索结果输出的部分，就可以开始写前台搜索的部分了。
首先需要的是给用户输入搜索关键字及显示搜索结果的地方，我用div来分别显示这两个部分：
ajaxsearch.htm

1. <!-- 要用到JavaScript，外部链入 -->
   
2. <script type="text/javascript" src="ajaxsearch.js"></script>
   
3. <!-- 用户输入部分 -->
   
4. <div>
   
5.         <!-- 因为没有用form，所以要处理input的keydown事件。在用户按下回车后搜索 -->
   
6.         <input type="text" id="searchword" onkeydown="if(event.keyCode==13) AjaxSearch();" />　
   
7.         <!-- 搜索按钮 -->
   
8.         <input type="button" onclick="AjaxSearch();" value="搜索" />
   
9. </div>
   
10. <!-- 搜索结果显示部分 -->
    
11. <div id="search_result">
    
12.         <!-- 初始时提示用户输入搜索关键字 -->
    
13.         <ul><li>请输入关键字</li></ul>
    
14. </div>

复制代码

完成了用户输入及结果输出的部分，就可以开始写最后的部分——客户端程序了。
首先是创建XMLHttpRequest对象，这部分代码不再多说，对AJAX稍有接触应该都看得懂这段代码，前篇教程中也有详细注释：
ajaxsearch.js(part1)

1. var xmlObj = false;
   
2. var xmlResult;
   
3. try {
   
4.     xmlObj=new XMLHttpRequest;
   
5. }
   
6. catch(e) {
   
7.     try {
   
8.         xmlObj=new ActiveXObject("MSXML2.XMLHTTP");
   
9.     }
   
10.     catch(e2) {
    
11.         try {
    
12.             xmlObj=new ActiveXObject("Microsoft.XMLHTTP");
    
13.         }
    
14.         catch(e3) {
    
15.             xmlObj=false;
    
16.         }
    
17.     }
    
18. }
    
19. if (!xmlObj) {
    
20.     alert("XMLHttpRequest init Failed!");
    
21. }

复制代码

接下来是发送搜索请求部分：
ajaxsearch.js(part2)

1. function AjaxSearch() {
   
2.         var searchword;
   
3.         // 获取搜索关键字，并且进行URLEncode
   
4.         searchword=escape(document.getElementById("searchword").value);
   
5.         if(searchword=="") {
   
6.                 // 如果关键字为空，则提示用户输入关键字
   
7.                 document.getElementById("search_result").innerHTML="<ul><li>请输入关键字!</li></ul>";
   
8.                 return;
   
9.         }
   
10.         // 给出提示，正在搜索
    
11.         document.getElementById("search_result").innerHTML="<ul><li>正在加载，请稍候</li></ul>";
    
12.         // 打开一个连接，采用POST
    
13.         xmlObj.open ("POST", "ajaxsearch.asp", true);
    
14.         // 设置请求头，表单内容格式为URLEncoded
    
15.         xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    
16.         // 设置完成请求后响应函数
    
17.         xmlObj.onreadystatechange=function() {
    
18.                 // 完成响应
    
19.                 if(xmlObj.readyState==4) {
    
20.                         // 状态正常
    
21.                         if(xmlObj.status==200) {
    
22.                                 // 设置xmlResult为搜索结果XML文档
    
23.                                 xmlResult=xmlObj.responseXML;
    
24.                                 // 调用AjaxShowResult()显示搜索结果
    
25.                                 AjaxShowResult();
    
26.                         }
    
27.                 }
    
28.         }
    
29.         // 发送请求，内容为搜索的关键字
    
30.         xmlObj.send("searchword="+searchword);
    
31. }

复制代码

最后是搜索结果的显示：
ajaxsearch.js(part3)

1. function AjaxShowResult() {
   
2.         var results,i,strTemp;
   
3.         // 获取搜索结果集合
   
4.         results=xmlResult.getElementsByTagName("result");
   
5.         // 用无序列表来显示搜索结果
   
6.         strTemp="<ul>";
   
7.         // 首先判断搜索结果是否为空
   
8.         if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
   
9.                 // 是空，则显示没有符合的搜索结果
   
10.                 strTemp=strTemp+"<li>无搜索结果</li>";
    
11.         else
    
12.                 // 循环输出每个搜索结果
    
13.                 for(i=0;i<results.length;i++)
    
14.                         strTemp = strTemp + "<li><a href='blogview.asp?logID=" + results[i].getElementsByTagName("logid")[0].firstChild.data + "'>" + results[i].getElementsByTagName("logtitle")[0].firstChild.data + "</a></li>";　
    
15.         strTemp=strTemp+"</ul>";
    
16.         // 显示搜索结果
    
17.         document.getElementById("search_result").innerHTML = strTemp
    
18. }

复制代码

至此，一个完整的AJAX实例完成了。
几个经验：
1. 页面使用UTF-8编码，这样可以省却很多烦恼
2. 在获取搜索结果时，因为用的getElementsByTagName，返回的是一个集合，所以要在结果之后加上下标，如例子中的：
    results[0].getElementsByTagName("logid")[0].firstChild.data
3. 建议使用document.getElementById()来获取对象，而不要使用document.all这样的方法
参考资料：
1. 《AJAX初体验之上手篇》
2. 发布三个ajax相关的函数，包括无刷新提交表单等

原文地址：http://www.xujiwei.cn/blog/blogview.asp?logID=512

[ 本帖最后由 HotHeart 于 2006-7-28 18:32 编辑 ]

萧萧小雨

不错,加入收藏.

nsnake

不错
支持你下

hubro

嘿嘿
看看我写的,也是请求的XML
www.hubro.net/spank.aspx

HotHeart 楼主

hubro你的东东蛮不错的哈～～
ps.你的blog在Firefox 1.5.0.5下显示不太正常，最新发表跟日历混到一块儿了

qw306

上面的原代码

1. Do While Not rsSearch.EOF
   
2.         ' 循环输出每一个结果
   
3.         XML_Result=XML_Result&"<result><logid>"&rsSearch("log_ID")&"</logid><logtitle><![CDATA["&rsSearch("log_Title")&"]]></logtitle></result>"　  
   
4.         rsSearch.MoveNext
   
5.     Loop

复制代码

我的原代码

1.                  ' 循环输出搜索结果
   
2.                  Do While Not rsSearch.Eof
   
3.                  
   
4.                 XML_Result=XML_Result&"<result><logid>a href=search/"&rsSearch("filekey")&"?keywords="&trim(rsSearch("keywords"))&"</logid><logtitle><![CDATA["&trim(rsSearch("keywords"))&"]]></logtitle></result>"         
   
5.                
   
6.                 rsSearch.MoveNext
   
7.                 i=i+1
   
8.                 if i=13 then exit do
   
9.                 Loop

复制代码

我现在想在关键字加多几个ID传递.如.

1.                  ' 循环输出搜索结果
   
2.                  Do While Not rsSearch.Eof
   
3.                  
   
4.                 XML_Result=XML_Result&"<result><logid>a href=search/"&rsSearch("filekey")&"?id=12&idcity=1&keywords="&trim(rsSearch("keywords"))&"</logid><logtitle><![CDATA["&trim(rsSearch("keywords"))&"]]></logtitle></result>"         
   
5.                
   
6.                 rsSearch.MoveNext
   
7.                 i=i+1
   
8.                 if i=13 then exit do
   
9.                 Loop

复制代码

但,现在问题是在当中加了.id=12&idcity=1&keywords
有&这个连接符号,就运行错误,显示不了.
望知道的说明一下解决方法..

PS:要是说得不够清楚的话,说出来,我再解释一下.

Calchas

我做的没有这么多内容。

qw306

问题还没有解决...
对Ajax说不上很熟悉.还是说不可以这样吗?理论上觉得是可以的..