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

複製代碼 代碼如下:<?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>"　

End IF

' 迴圈輸出搜尋結果

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稍有接觸應該都看得懂這段代碼，前篇教程中也有詳細注釋：

複製代碼 代碼如下:

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

function AjaxSearch() {
var searchword;
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>";
xmlObj.open ("POST", "ajaxsearch.asp", true);
xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlObj.onreadystatechange=function() {
if(xmlObj.readyState==4) {
if(xmlObj.status==200) {
xmlResult=xmlObj.responseXML;
AjaxShowResult();
}
}
}
xmlObj.send("searchword="+searchword);
}

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執行個體完成了。

幾個經驗：

1. 頁面使用UTF-8編碼，這樣可以省卻很多煩惱

2. 在擷取搜尋結果時，因為用的getElementsByTagName，返回的是一個集合，所以要在結果之後加上下標，如例子中的：

results[i].getElementsByTagName("logid")[0].firstChild.data

3. 建議使用document.getElementById()來擷取對象，而不要使用document.all這樣的方法

參考資料：

1. 《AJAX初體驗之上手篇》

2. 發布三個ajax相關的函數，包括無重新整理提交表單等

執行個體中的三個檔案打包下載