DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 使用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

CODE:
<?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

CODE:
<!-- #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

CODE:
<!-- 要用到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>

-
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved