AJAX實(shí)現(xiàn)無(wú)刷新登錄功能

2024-09-01 08:30:13

字體：大中小

供稿：網(wǎng)友

如果你對(duì)AJAX還不是很了解，那可以先看看這篇AJAX實(shí)現(xiàn)無(wú)刷新登錄功能，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。

現(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。有了這些資料，就可以開(kāi)始創(chuàng)建搜索結(jié)果的XML文檔模板了。在顯示搜索結(jié)果時(shí)，需要顯示日志的標(biāo)題，以及日志的ID來(lái)創(chuàng)建到查看日志的鏈接。
搜索結(jié)果模板sample.xml

?
?????
?????
?????????
????????1?
?????????
????????AJAX初體驗(yàn)之上手篇?
????

每個(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

'?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=""

IF?Search_WordEmpty?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"

????'?打開(kāi)記錄集

????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&"#"　

????End?IF

????'?循環(huán)輸出搜索結(jié)果

????Do?While?Not?rsSearch.EOF

????????XML_Result=XML_Result&""&rsSearch("log_ID")&""??'?循環(huán)輸出每一個(gè)結(jié)果

????????rsSearch.MoveNext

????Loop

Else

????'?關(guān)鍵字為空，則返回?zé)o搜索結(jié)果

????XML_Result=XML_Result&"#"

End?IF

XML_Result=XML_Result&""

'?設(shè)置MIME?Type為XML文檔

Response.ContentType?=?"application/xml"

'Response.CharSet?=?"utf-8"

'?輸出搜索結(jié)果

Response.Write(XML_Result)

%>

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

????

????　

????

????

????

????

請(qǐng)輸入關(guān)鍵字

完成了用戶輸入及結(jié)果輸出的部分，就可以開(kāi)始寫(xiě)最后的部分——客戶端程序了。

首先是創(chuàng)建XMLHttpRequest對(duì)象，這部分代碼不再多說(shuō)，對(duì)AJAX稍有接觸應(yīng)該都看得懂這段代碼，前篇教程中也有詳細(xì)注釋?zhuān)?/p>

function AjaxSearch() {
?var searchword;
?searchword=escape(document.getElementById("searchword").value);
?if(searchword=="") {
??document.getElementById("search_result").innerHTML="

請(qǐng)輸入關(guān)鍵字!

";
??return;
?}
?document.getElementById("search_result").innerHTML="

正在加載，請(qǐng)稍候

";
?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="

";
?if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
??strTemp=strTemp+"

無(wú)搜索結(jié)果

";
?else
??for(i=0;i???strTemp = strTemp + "

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

";
?strTemp=strTemp+"

";
?document.getElementById("search_result").innerHTML = strTemp
}

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

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

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

2.?在獲取搜索結(jié)果時(shí)，因?yàn)橛玫膅etElementsByTagName，返回的是一個(gè)集合，所以要在結(jié)果之后加上下標(biāo)，如例子中的：

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