如果你對AJAX不是很了解，可以先看看這篇教程的前篇《AJAX初體驗之上手篇》。
現(xiàn)在博客很流行，相信應該上網時間稍微長點的朋友都會在這或者在那的有一個自己的博客。對于一些有一定能力的朋友，可能更喜歡自己去下載一個博客程序來架設一個自己的博客，而不是使用一些博客網站提供的服務。而大部分博客程序所帶的搜索功能是提交查詢關鍵字到搜索頁面，然后在后臺生成搜索結果，再呈現(xiàn)給用戶，這過程之中浪費了一些帶寬，如博客的側邊欄。要節(jié)約這一些帶寬，我們可以用AJAX來打造自己的無刷新日志搜索。
在本篇教程中，數(shù)據(jù)庫的表名和日志查看頁面以L-Blog為例，因為我的博客程序是從L-Blog修改而來^_^。
本教程中的例子已經通過實際測試，可以直接在L-Blog或FBS中使用。當然，要真正應用的話還是需要做一些美化及完善的。
在數(shù)據(jù)庫中日志內容數(shù)據(jù)表名為blog_Content，其中日志ID為log_ID，日志標題為log_Title，日志查看頁面為blogview.asp，參數(shù)為日志logID。有了這些資料，就可以開始創(chuàng)建搜索結果的XML文檔模板了。在顯示搜索結果時，需要顯示日志的標題，以及日志的ID來創(chuàng)建到查看日志的鏈接。
搜索結果模板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來動態(tài)生成搜索結果需要的XML文檔了。搜索的關鍵字采用POST方式來傳遞。
搜索結果輸出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")
' 獲取搜索關鍵字
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
' 如果沒有搜索結果就產生一個結果，logid為#，標志著沒有搜索結果
IF rsSearch.BOF AND rsSearch.EOF Then
XML_Result=XML_Result"result>logid>#/logid>logtitle />/result>"
End IF
' 循環(huán)輸出搜索結果
Do While Not rsSearch.EOF
XML_Result=XML_Result"result>logid>"rsSearch("log_ID")"/logid>logtitle>![CDATA["rsSearch("log_Title")"]]>/logtitle>/result>" ' 循環(huán)輸出每一個結果
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>
完成了用戶輸入及結果輸出的部分，就可以開始寫最后的部分——客戶端程序了。
首先是創(chuàng)建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;iresults.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. 發(fā)布三個ajax相關的函數(shù)，包括無刷新提交表單等
實例中的三個文件打包下載
