AJAX打造博客無刷新搜索
如果你對AJAX不是很了解，可以先看看這篇教程：《AJAX初體驗之上手篇》。
現(xiàn)在博客很流行，相信應(yīng)該上網(wǎng)時間稍微長點(diǎn)的朋友都會在這或者在那的有一個自己的博客。對于一些有一定能力的朋友，可能更喜歡自己去下載一個博客程序來架設(shè)一個自己的博客，而不是使用一些博客網(wǎng)站提供的服務(wù)。而大部分博客程序所帶的搜索功能是提交查詢關(guān)鍵字到搜索頁面，然后在后臺生成搜索結(jié)果，再呈現(xiàn)給用戶，這過程之中浪費(fèi)了一些帶寬，如博客的側(cè)邊欄。要節(jié)約這一些帶寬，我們可以用AJAX來打造自己的無刷新日志搜索。
在本篇教程中，數(shù)據(jù)庫的表名和日志查看頁面以L-Blog為例，因為我的博客程序是從L-Blog修改而來。
本教程中的例子已經(jīng)通過實(shí)際測試，可以直接在L-Blog或FBS中使用。當(dāng)然，要真正應(yīng)用的話還是需要做一些美化及完善的。
在數(shù)據(jù)庫中日志內(nèi)容數(shù)據(jù)表名為blog_Content，其中日志ID為log_ID，日志標(biāo)題為log_Title，日志查看頁面為blogview.asp，參數(shù)為日志logID。有了這些資料，就可以開始創(chuàng)建搜索結(jié)果的XML文檔模板了。在顯示搜索結(jié)果時，需要顯示日志的標(biāo)題，以及日志的ID來創(chuàng)建到查看日志的鏈接。
搜索結(jié)果模板sample.xml
<?xml version="1.0" encoding="utf-8"?>
<blogsearch>
<!-- 每一個reslut就是一個搜索結(jié)果 -->
<result>
<!-- 日志的ID -->
<logid>1</logid>
<!-- 日志的標(biāo)題 -->
<logtitle>AJAX初體驗之上手篇</logtitle>
</result>
</blogsearch>
每個result就是一個搜索結(jié)果，為了處理沒有找到相關(guān)內(nèi)容的情況，我定義了當(dāng)搜索結(jié)果為空時logid為#。
在完成XML文檔模板之后，就可以用ASP來動態(tài)生成搜索結(jié)果需要的XML文檔了。搜索的關(guān)鍵字采用POST方式來傳遞。
搜索結(jié)果輸出ajaxsearch.asp
<!-- #include file="commond.asp" -->
<!-- #include file="include/function.asp" -->
<%
' commond.asp為數(shù)據(jù)庫連接文件
' function.asp中有要用到的函數(shù)CheckStr
Dim Search_Word,XML_Result,rsSearch,sqlSearch
Set rsSearch=Server.CreateObject("ADODB.RecordSet")
' 獲取搜索關(guān)鍵字
Search_Word=CheckStr(Trim(Request.Form("searchword")))
' XML文檔頭
XML_Result="<?xml version=""1.0"" encoding=""utf-8""?><blogsearch>"
IF Search_Word<>Empty Then
' 創(chuàng)建查詢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
' 如果沒有搜索結(jié)果就產(chǎn)生一個結(jié)果，logid為#，標(biāo)志著沒有搜索結(jié)果
IF rsSearch.BOF AND rsSearch.EOF Then XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"
' 循環(huán)輸出搜索結(jié)果
Do While Not rsSearch.EOF
' 循環(huán)輸出每一個結(jié)果
XML_Result=XML_Result&"<result><logid>"&rsSearch("log_ID")&"</logid><logtitle><![CDATA["&rsSearch("log_Title")&"]]></logtitle></result>"
rsSearch.MoveNext
Loop
Else
' 關(guān)鍵字為空，則返回?zé)o搜索結(jié)果
XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"
End IF
XML_Result=XML_Result&"</blogsearch>"
' 設(shè)置MIME Type為XML文檔
Response.ContentType = "application/xml"
'Response.CharSet = "utf-8"
' 輸出搜索結(jié)果
Response.Write(XML_Result)
%>
有了后臺搜索結(jié)果輸出的部分，就可以開始寫前臺搜索的部分了。
首先需要的是給用戶輸入搜索關(guān)鍵字及顯示搜索結(jié)果的地方，我用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>
<!-- 搜索結(jié)果顯示部分 -->
<div id="search_result">
<!-- 初始時提示用戶輸入搜索關(guān)鍵字 -->
<ul><li>請輸入關(guān)鍵字</li></ul>
</div>
完成了用戶輸入及結(jié)果輸出的部分，就可以開始寫最后的部分——客戶端程序了。
首先是創(chuàng)建XMLHttpRequest對象，這部分代碼不再多說，對AJAX稍有接觸應(yīng)該都看得懂這段代碼，前篇教程中也有詳細(xì)注釋：
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!");
}
接下來是發(fā)送搜索請求部分：
ajaxsearch.js(part2)
function AjaxSearch() {
var searchword;
// 獲取搜索關(guān)鍵字，并且進(jìn)行URLEncode
searchword=escape(document.getElementById("searchword").value);
if(searchword=="") {
// 如果關(guān)鍵字為空，則提示用戶輸入關(guān)鍵字
document.getElementById("search_result").innerHTML="<ul><li>請輸入關(guān)鍵字!</li></ul>";
return;
}
// 給出提示，正在搜索
document.getElementById("search_result").innerHTML="<ul><li>正在加載，請稍候</li></ul>";
// 打開一個連接，采用POST
xmlObj.open ("POST", "ajaxsearch.asp", true);
// 設(shè)置請求頭，表單內(nèi)容格式為URLEncoded
xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 設(shè)置完成請求后響應(yīng)函數(shù)
xmlObj.onreadystatechange=function() {
// 完成響應(yīng)
if(xmlObj.readyState==4) {
// 狀態(tài)正常
if(xmlObj.status==200) {
// 設(shè)置xmlResult為搜索結(jié)果XML文檔
xmlResult=xmlObj.responseXML;
// 調(diào)用AjaxShowResult()顯示搜索結(jié)果
AjaxShowResult();
}
}
}
// 發(fā)送請求，內(nèi)容為搜索的關(guān)鍵字
xmlObj.send("searchword="+searchword);
}
最后是搜索結(jié)果的顯示：
ajaxsearch.js(part3)
function AjaxShowResult() {
var results,i,strTemp;
// 獲取搜索結(jié)果集合
results=xmlResult.getElementsByTagName("result");
// 用無序列表來顯示搜索結(jié)果
strTemp="<ul>";
// 首先判斷搜索結(jié)果是否為空
if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
// 是空，則顯示沒有符合的搜索結(jié)果
strTemp=strTemp+"<li>無搜索結(jié)果</li>";
else
// 循環(huán)輸出每個搜索結(jié)果
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>";
// 顯示搜索結(jié)果
document.getElementById("search_result").innerHTML = strTemp
}
至此，一個完整的AJAX實(shí)例完成了。
幾個經(jīng)驗：
- 頁面使用UTF-8編碼，這樣可以省卻很多煩惱
- 在獲取搜索結(jié)果時，因為用的getElementsByTagName，返回的是一個集合，所以要在結(jié)果之后加上下標(biāo)，如例子中的：
results[0].getElementsByTagName("logid")[0].firstChild.data - 建議使用document.getElementById()來獲取對象，而不要使用document.all這樣的方法
實(shí)例中三個文件打包下載：ajaxsearch.rar
相關(guān)文章
原生ajax和iframe框架實(shí)現(xiàn)圖片文件上傳的兩種方式
這篇文章主要為大家詳細(xì)介紹了原生ajax和iframe框架實(shí)現(xiàn)圖片文件上傳的兩種方式，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了使用Ajax時處理用戶session失效問題的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本篇文章主要介紹了前端ajax的各種與后端交互的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
Ajax標(biāo)簽導(dǎo)航效果(仿網(wǎng)易首頁)
Ajax標(biāo)簽導(dǎo)航效果(仿網(wǎng)易首頁)...2006-10-10
Ajax實(shí)現(xiàn)無刷新分頁實(shí)例代碼
這篇文章主要介紹了Ajax實(shí)現(xiàn)無刷新分頁實(shí)例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
今天小編就為大家分享一篇關(guān)于Ajax報錯400的參考解決辦法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-10-10
AJAX在不同瀏覽器中XMLHttpRequest對象的生成示例
本文為大家介紹下AJAX在不同瀏覽器中XMLHttpRequest對象是怎樣生成的，以方便我們針對不同瀏覽器進(jìn)行測試，感興趣的朋友可以參考下，希望對大家有所幫助2013-07-07
這篇文章主要介紹了創(chuàng)建ajax對象并兼容多個瀏覽器方法簡單記錄,在某些情況下還是比較實(shí)用的，需要的朋友可以參考下2014-08-08
ASP小偷程序如何利用XMLHTTP實(shí)現(xiàn)表單的提交
ASP小偷程序如何利用XMLHTTP實(shí)現(xiàn)表單的提交...2006-07-07
前端ajax請求+后端java實(shí)現(xiàn)的下載zip壓縮包功能示例
這篇文章主要介紹了前端ajax請求+后端java實(shí)現(xiàn)的下載zip壓縮包功能,結(jié)合實(shí)例形式分析了ajax請求交互與后端圖片zip格式壓縮并下載功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2023-05-05