這篇文章主要講解了“AJAX怎么實現(xiàn)博客無刷新搜索功能”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“AJAX怎么實現(xiàn)博客無刷新搜索功能”吧！

專注于為中小企業(yè)提供網(wǎng)站制作、網(wǎng)站設計服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)平昌免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

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

代碼如下:

   
   
       
        1
       
        AJAX初體驗之上手篇
   

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

搜索結(jié)果輸出ajaxsearch.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=""
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為#，標志著沒有搜索結(jié)果
    IF rsSearch.BOF AND rsSearch.EOF Then XML_Result=XML_Result&"#"　
    ' 循環(huán)輸出搜索結(jié)果
    Do While Not rsSearch.EOF
        ' 循環(huán)輸出每一個結(jié)果
        XML_Result=XML_Result&""&rsSearch("log_ID")&""　 
        rsSearch.MoveNext
    Loop
Else
    ' 關(guān)鍵字為空，則返回無搜索結(jié)果
    XML_Result=XML_Result&"#"
End IF
XML_Result=XML_Result&""
' 設置MIME Type為XML文檔
Response.ContentType = "application/xml"
'Response.CharSet = "utf-8"
' 輸出搜索結(jié)果
Response.Write(XML_Result)
%>

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

ajaxsearch.htm

代碼如下:

完成了用戶輸入及結(jié)果輸出的部分，就可以開始寫最后的部分——客戶端程序了。
首先是創(chuàng)建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!");
}

接下來是發(fā)送搜索請求部分：

ajaxsearch.js(part2)

代碼如下:

function AjaxSearch() {
    var searchword;
    // 獲取搜索關(guān)鍵字，并且進行URLEncode
    searchword=escape(document.getElementById("searchword").value);
    if(searchword=="") {
        // 如果關(guān)鍵字為空，則提示用戶輸入關(guān)鍵字
        document.getElementById("search_result").innerHTML="

• 請輸入關(guān)鍵字!

";
        return;
    }
    // 給出提示，正在搜索
    document.getElementById("search_result").innerHTML="

• 正在加載，請稍候

";
    // 打開一個連接，采用POST
    xmlObj.open ("POST", "ajaxsearch.asp", true);
    // 設置請求頭，表單內(nèi)容格式為URLEncoded
    xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 設置完成請求后響應函數(shù)
    xmlObj.onreadystatechange=function() {
        // 完成響應
        if(xmlObj.readyState==4) {
            // 狀態(tài)正常
            if(xmlObj.status==200) {
                // 設置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="

";
    // 首先判斷搜索結(jié)果是否為空
    if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
        // 是空，則顯示沒有符合的搜索結(jié)果
        strTemp=strTemp+"
• 無搜索結(jié)果
";
    else
        // 循環(huán)輸出每個搜索結(jié)果
        for(i=0;i            strTemp = strTemp + "
• " + results[i].getElementsByTagName("logtitle")[0].firstChild.data + "
";　
    strTemp=strTemp+"

";
    // 顯示搜索結(jié)果
    document.getElementById("search_result").innerHTML = strTemp
}

至此，一個完整的AJAX實例完成了。

感謝各位的閱讀，以上就是“AJAX怎么實現(xiàn)博客無刷新搜索功能”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對AJAX怎么實現(xiàn)博客無刷新搜索功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

分享名稱：AJAX怎么實現(xiàn)博客無刷新搜索功能
文章URL：http://weahome.cn/article/gdsshh.html