快捷導(dǎo)航

AJAX打造博客無(wú)刷新搜索

更新時(shí)間：2006年07月30日 00:00:00 作者：

在本篇教程中，數(shù)據(jù)庫(kù)的表名和日志查看頁(yè)面以L-Blog為例，因?yàn)槲业牟┛统绦蚴菑腖-Blog修改而來(lái)。

如果你對(duì)AJAX不是很了解，可以先看看這篇教程：《AJAX初體驗(yàn)之上手篇》。

現(xiàn)在博客很流行，相信應(yīng)該上網(wǎng)時(shí)間稍微長(zhǎng)點(diǎn)的朋友都會(huì)在這或者在那的有一個(gè)自己的博客。對(duì)于一些有一定能力的朋友，可能更喜歡自己去下載一個(gè)博客程序來(lái)架設(shè)一個(gè)自己的博客，而不是使用一些博客網(wǎng)站提供的服務(wù)。而大部分博客程序所帶的搜索功能是提交查詢關(guān)鍵字到搜索頁(yè)面，然后在后臺(tái)生成搜索結(jié)果，再呈現(xiàn)給用戶，這過(guò)程之中浪費(fèi)了一些帶寬，如博客的側(cè)邊欄。要節(jié)約這一些帶寬，我們可以用AJAX來(lái)打造自己的無(wú)刷新日志搜索。

在本篇教程中，數(shù)據(jù)庫(kù)的表名和日志查看頁(yè)面以L-Blog為例，因?yàn)槲业牟┛统绦蚴菑腖-Blog修改而來(lái)。

本教程中的例子已經(jīng)通過(guò)實(shí)際測(cè)試，可以直接在L-Blog或FBS中使用。當(dāng)然，要真正應(yīng)用的話還是需要做一些美化及完善的。

在數(shù)據(jù)庫(kù)中日志內(nèi)容數(shù)據(jù)表名為blog_Content，其中日志ID為log_ID，日志標(biāo)題為log_Title，日志查看頁(yè)面為blogview.asp，參數(shù)為日志logID。有了這些資料，就可以開始創(chuàng)建搜索結(jié)果的XML文檔模板了。在顯示搜索結(jié)果時(shí)，需要顯示日志的標(biāo)題，以及日志的ID來(lái)創(chuàng)建到查看日志的鏈接。

搜索結(jié)果模板sample.xml

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<blogsearch>
    <!-- 每一個(gè)reslut就是一個(gè)搜索結(jié)果 -->
    <result>
        <!-- 日志的ID -->
        <logid>1</logid>
        <!-- 日志的標(biāo)題 -->
        <logtitle>AJAX初體驗(yàn)之上手篇</logtitle>
    </result>
</blogsearch>

每個(gè)result就是一個(gè)搜索結(jié)果，為了處理沒(méi)有找到相關(guān)內(nèi)容的情況，我定義了當(dāng)搜索結(jié)果為空時(shí)logid為#。
在完成XML文檔模板之后，就可以用ASP來(lái)動(dòng)態(tài)生成搜索結(jié)果需要的XML文檔了。搜索的關(guān)鍵字采用POST方式來(lái)傳遞。

搜索結(jié)果輸出ajaxsearch.asp

復(fù)制代碼代碼如下:

<!-- #include file="commond.asp" -->
<!-- #include file="include/function.asp" -->
<%
' commond.asp為數(shù)據(jù)庫(kù)連接文件
' 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語(yǔ)句
    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
    ' 如果沒(méi)有搜索結(jié)果就產(chǎn)生一個(gè)結(jié)果，logid為#，標(biāo)志著沒(méi)有搜索結(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)輸出每一個(gè)結(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)
%>

有了后臺(tái)搜索結(jié)果輸出的部分，就可以開始寫前臺(tái)搜索的部分了。
首先需要的是給用戶輸入搜索關(guān)鍵字及顯示搜索結(jié)果的地方，我用div來(lái)分別顯示這兩個(gè)部分：

ajaxsearch.htm

復(fù)制代碼代碼如下:

<!-- 要用到JavaScript，外部鏈入 -->
<script type="text/javascript" src="ajaxsearch.js"></script>
<!-- 用戶輸入部分 -->
<div>
    <!-- 因?yàn)闆](méi)有用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">
    <!-- 初始時(shí)提示用戶輸入搜索關(guān)鍵字 -->
    <ul><li>請(qǐng)輸入關(guān)鍵字</li></ul>
</div>

完成了用戶輸入及結(jié)果輸出的部分，就可以開始寫最后的部分——客戶端程序了。
首先是創(chuàng)建XMLHttpRequest對(duì)象，這部分代碼不再多說(shuō)，對(duì)AJAX稍有接觸應(yīng)該都看得懂這段代碼，前篇教程中也有詳細(xì)注釋：

ajaxsearch.js(part1)

復(fù)制代碼代碼如下:

 
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!"); 
}

接下來(lái)是發(fā)送搜索請(qǐng)求部分：

ajaxsearch.js(part2)

復(fù)制代碼代碼如下:

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>請(qǐng)輸入關(guān)鍵字!</li></ul>";
        return;
    }
    // 給出提示，正在搜索
    document.getElementById("search_result").innerHTML="<ul><li>正在加載，請(qǐng)稍候</li></ul>";
    // 打開一個(gè)連接，采用POST
    xmlObj.open ("POST", "ajaxsearch.asp", true);
    // 設(shè)置請(qǐng)求頭，表單內(nèi)容格式為URLEncoded
    xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 設(shè)置完成請(qǐng)求后響應(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ā)送請(qǐng)求，內(nèi)容為搜索的關(guān)鍵字
    xmlObj.send("searchword="+searchword);
}

最后是搜索結(jié)果的顯示：

ajaxsearch.js(part3)

復(fù)制代碼代碼如下:

function AjaxShowResult() {
    var results,i,strTemp;
    // 獲取搜索結(jié)果集合
    results=xmlResult.getElementsByTagName("result");
    // 用無(wú)序列表來(lái)顯示搜索結(jié)果
    strTemp="<ul>";
    // 首先判斷搜索結(jié)果是否為空
    if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
        // 是空，則顯示沒(méi)有符合的搜索結(jié)果
        strTemp=strTemp+"<li>無(wú)搜索結(jié)果</li>";
    else
        // 循環(huán)輸出每個(gè)搜索結(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
}

至此，一個(gè)完整的AJAX實(shí)例完成了。

幾個(gè)經(jīng)驗(yàn)：

頁(yè)面使用UTF-8編碼，這樣可以省卻很多煩惱
在獲取搜索結(jié)果時(shí)，因?yàn)橛玫膅etElementsByTagName，返回的是一個(gè)集合，所以要在結(jié)果之后加上下標(biāo)，如例子中的：
results[0].getElementsByTagName("logid")[0].firstChild.data
建議使用document.getElementById()來(lái)獲取對(duì)象，而不要使用document.all這樣的方法

實(shí)例中三個(gè)文件打包下載：ajaxsearch.rar