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

如果你对AJAX不是很了解，可以先看看这篇好代码教程的前篇《AJAX初体验之上手篇》。

现在博客很流行，相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友，可能更喜欢自己去下载一个博客程序来架设一个自己的博客，而不是使用一些博客网站提供的服务。而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面，然后在后台生成搜索结果，再呈现给用户，这过程之中浪费了一些带宽，如博客的侧边栏。要节约这一些带宽，我们可以用AJAX来打造自己的无刷新日志搜索。

在本篇好代码教程中，数据库的表名和日志查看页面以L-Blog为例，因为我的博客程序是从L-Blog修改而来^_^。

本好代码教程中的例子已经通过实际测试，可以直接在L-Blog或FBS中使用。当然，要真正应用的话还是需要做一些美化及完善的。

在数据库中日志内容数据表名为blog_Content，其中日志ID为log_ID，日志标题为log_Title，日志查看页面为blogview.asp，参数为日志logID。有了这些资料，就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时，需要显示日志的标题，以及日志的ID来创建到查看日志的链接。
搜索结果模板sample.xml

<?xmlversion="1.0"encoding="utf-8"?> 
<blogsearch>
<!--每一个reslut就是一个搜索结果-->
<result>
<!--日志的ID-->
<logid>1</logid>
<!--日志的标题-->
<logtitle>AJAX初体验之上手篇</logtitle>
</result> 
</blogsearch> 

每个result就是一个搜索结果，为了处理没有找到相关内容的情况，我定义了当搜索结果为空时logid为#。

在完成XML文档模板之后，就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。
搜索结果输出ajaxsearch.asp

<!--#includefile="commond.asp"--> <!--#includefile="include/function.asp"--> <% 'commond.asp为数据库连接文件 'function.asp中有要用到的函数CheckStr DimSearch_Word,XML_Result,rsSearch,sqlSearch SetrsSearch=Server.CreateObject("ADODB.RecordSet") '获取搜索关键字 Search_Word=CheckStr(Trim(Request.Form("searchword"))) 'XML文档头 XML_Result="<?xmlversion=""1.0""encoding=""utf-8""?><blogsearch>" IFSearch_Word<>EmptyThen '创建查询SQL语句 sqlSearch="SELECTlog_ID,log_Title,log_ContentFROMblog_ContentWHERElog_Title"_ &"LIKE'%"&Search_Word&"%'ANDlog_IsShow=TrueORDERBYlog_IDDESC" '打开记录集 rsSearch.opensqlSearch,Conn,1,1 '如果没有搜索结果就产生一个结果，logid为#，标志着没有搜索结果 IFrsSearch.BOFANDrsSearch.EOFThen XML_Result=XML_Result&"<result><logid>#</logid><logtitle/></result>"　 EndIF '循环输出搜索结果 DoWhileNotrsSearch.EOF XML_Result=XML_Result&"<result><logid>"&rsSearch("log_ID")&"</logid><logtitle><![CDATA["&rsSearch("log_Title")&"]]></logtitle></result>"'循环输出每一个结果 rsSearch.MoveNext Loop Else '关键字为空，则返回无搜索结果 XML_Result=XML_Result&"<result><logid>#</logid><logtitle/></result>" EndIF XML_Result=XML_Result&"</blogsearch>" '设置MIMEType为XML文档 Response.ContentType="application/xml" 'Response.CharSet="utf-8" '输出搜索结果 Response.Write(XML_Result) %> 

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

var xmlObj = false;
var xmlResult;
try {
 xmlObj=new XMLHttpRequest;
}
catch(e) {
 try {
 xmlObj=new ActiveXObject("MSXML2.XMLHTTP");
 }
 catch(e2) {
 try {
 xmlObj=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch(e3) {
 xmlObj=false;
 }
 }
}
if (!xmlObj) {
 alert("XMLHttpRequest init Failed!");
}
function AjaxSearch() {
var searchword;
searchword=escape(document.getElementById("searchword").value);
if(searchword=="") {
document.getElementById("search_result").innerHTML="<ul><li>请输入关键字!</li></ul>";
return;
}
document.getElementById("search_result").innerHTML="<ul><li>正在加载，请稍候</li></ul>";
xmlObj.open ("POST", "ajaxsearch.asp", true);
xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlObj.onreadystatechange=function() {
if(xmlObj.readyState==4) {
if(xmlObj.status==200) {
xmlResult=xmlObj.responseXML;
AjaxShowResult();
}
}
}
xmlObj.send("searchword="+searchword);
}
function AjaxShowResult() {
var results,i,strTemp;
results=xmlResult.getElementsByTagName("result");
strTemp="<ul>";
if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
strTemp=strTemp+"<li>无搜索结果</li>";
else
for(i=0;i<results.length;i++)
strTemp = strTemp + "<li><a rel="nofollow noopener noreferrer" href='blogview.asp?logID=" + results[i].getElementsByTagName("logid")[0].firstChild.data + "'>" + results[i].getElementsByTagName("logtitle")[0].firstChild.data + "</a></li>";
strTemp=strTemp+"</ul>";
document.getElementById("search_result").innerHTML = strTemp
}

至此，一个完整的AJAX实例完成了。

几个经验：

1.页面使用UTF-8编码，这样可以省却很多烦恼

2.在获取搜索结果时，因为用的getElementsByTagName，返回的是一个集合，所以要在结果之后加上下标，如例子中的：

results[i].getElementsByTagName("logid")[0].firstChild.data

3.建议使用document.getElementById()来获取对象，而不要使用document.all这样的方法

参考资料：

1.《AJAX初体验之上手篇》

2.发布三个ajax相关的函数，包括无刷新提交表单等

实例中的三个文件打包下载

到此这篇关于AJAX初体验之实战篇——打造博客无刷新搜索就介绍到这了。过好每一天，认真工作，努力学习学他人知识，变自已财富，学他人长处，补自已不足！让自已在众人的眼光里光彩夺目。努力回报给予想要的一切，人生真的太，简单得只要脚踏实地就行！更多相关AJAX初体验之实战篇——打造博客无刷新搜索内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！