这篇文章主要讲解了“AJAX怎么实现博客无刷新搜索功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“AJAX怎么实现博客无刷新搜索功能”吧！
搜索结果模板sample.xml
代码如下:
<?xml version="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
代码如下:
<!-- #include file="commond.asp" -->
<!-- #include file="include/function.asp" -->
<%
' commond.asp为数据库连接文件
' function.asp中有要用到的函数CheckStr
Dim Search_Word,XML_Result,rsSearch,sqlSearch
Set rsSearch=Server.CreateObject("ADODB.RecordSet")
' 获取搜索关键字
Search_Word=CheckStr(Trim(Request.Form("searchword")))
' XML文档头
XML_Result="<?xml version=""1.0"" encoding=""utf-8""?><blogsearch>"
IF Search_Word<>Empty Then
' 创建查询SQL语句
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"
' 打开记录集
rsSearch.open sqlSearch,Conn,1,1
' 如果没有搜索结果就产生一个结果，logid为#，标志着没有搜索结果
IF rsSearch.BOF AND rsSearch.EOF Then XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"
' 循环输出搜索结果
Do While Not rsSearch.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>"
End IF
XML_Result=XML_Result&"</blogsearch>"
' 设置MIME Type为XML文档
Response.ContentType = "application/xml"
'Response.CharSet = "utf-8"
' 输出搜索结果
Response.Write(XML_Result)
%>
有了后台搜索结果输出的部分，就可以开始写前台搜索的部分了。
首先需要的是给用户输入搜索关键字及显示搜索结果的地方，我用div来分别显示这两个部分：
ajaxsearch.htm
代码如下:
<!-- 要用到JavaScript，外部链入 -->
<script type="text/javascript" src="ajaxsearch.js"></script>
<!-- 用户输入部分 -->
<div>
<!-- 因为没有用form，所以要处理input的keydown事件。在用户按下回车后搜索 -->
<input type="text" id="searchword" onkeydown="if(event.keyCode==13) AjaxSearch();" />
<!-- 搜索按钮 -->
<input type="button" onclick="AjaxSearch();" value="搜索" />
</div>
<!-- 搜索结果显示部分 -->
<div id="search_result">
<!-- 初始时提示用户输入搜索关键字 -->
<ul><li>请输入关键字</li></ul>
</div>
完成了用户输入及结果输出的部分，就可以开始写最后的部分——客户端程序了。
首先是创建XMLHttpRequest对象，这部分代码不再多说，对AJAX稍有接触应该都看得懂这段代码，前篇教程中也有详细注释：
ajaxsearch.js(part1)
代码如下:
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!");
}
接下来是发送搜索请求部分：
ajaxsearch.js(part2)
代码如下:
function AjaxSearch() {
var searchword;
// 获取搜索关键字，并且进行URLEncode
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>";
// 打开一个连接，采用POST
xmlObj.open ("POST", "ajaxsearch.asp", true);
// 设置请求头，表单内容格式为URLEncoded
xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 设置完成请求后响应函数
xmlObj.onreadystatechange=function() {
// 完成响应
if(xmlObj.readyState==4) {
// 状态正常
if(xmlObj.status==200) {
// 设置xmlResult为搜索结果XML文档
xmlResult=xmlObj.responseXML;
// 调用AjaxShowResult()显示搜索结果
AjaxShowResult();
}
}
}
// 发送请求，内容为搜索的关键字
xmlObj.send("searchword="+searchword);
}
最后是搜索结果的显示：
ajaxsearch.js(part3)
代码如下:
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 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实例完成了。
感谢各位的阅读，以上就是“AJAX怎么实现博客无刷新搜索功能”的内容了，经过本文的学习后，相信大家对AJAX怎么实现博客无刷新搜索功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
