AJAX怎么實(shí)現(xiàn)無(wú)刷新搜索功能
這篇文章主要介紹“AJAX怎么實(shí)現(xiàn)無(wú)刷新搜索功能”，在日常操作中，相信很多人在AJAX怎么實(shí)現(xiàn)無(wú)刷新搜索功能問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”AJAX怎么實(shí)現(xiàn)無(wú)刷新搜索功能”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，先為拜城等服務(wù)建站，拜城等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為拜城企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
在數(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
代碼如下:
每個(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_Word<>Empty 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.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ì)注釋：
代碼如下:
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="
- 請(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="
- ";
- 無(wú)搜索結(jié)果 ";
- " + results[i].getElementsByTagName("logtitle")[0].firstChild.data + " ";
if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
strTemp=strTemp+"
else
for(i=0;i
strTemp=strTemp+"
document.getElementById("search_result").innerHTML = strTemp
}
至此，一個(gè)完整的AJAX實(shí)例完成了。
到此，關(guān)于“AJAX怎么實(shí)現(xiàn)無(wú)刷新搜索功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
網(wǎng)頁(yè)名稱：AJAX怎么實(shí)現(xiàn)無(wú)刷新搜索功能
當(dāng)前URL：http://m.jiaotiyi.com/article/iiodcd.html