如果你對AJAX還不是很了解,那可以先看看這篇AJAX實現無刷新登錄功能,需要的朋友可以參考借鑒,下面來一起看看吧。
現在博客很流行,相信應該上網時間稍微長點的朋友都會在這或者在那的有一個自己的博客。對于一些有一定能力的朋友,可能更喜歡自己去下載一個博客程序來架設一個自己的博客,而不是使用一些博客網站提供的服務。而大部分博客程序所帶的搜索功能是提交查詢關鍵字到搜索頁面,然后在后臺生成搜索結果,再呈現給用戶,這過程之中浪費了一些帶寬,如博客的側邊欄。要節約這一些帶寬,我們可以用AJAX來打造自己的無刷新日志搜索。
在本篇教程中,數據庫的表名和日志查看頁面以L-Blog為例,因為我的博客程序是從L-Blog修改而來^_^。
本教程中的例子已經通過實際測試,可以直接在L-Blog或FBS中使用。當然,要真正應用的話還是需要做一些美化及完善的。
在數據庫中日志內容數據表名為blog_Content,其中日志ID為log_ID,日志標題為log_Title,日志查看頁面為blogview.asp,參數為日志logID。有了這些資料,就可以開始創建搜索結果的XML文檔模板了。在顯示搜索結果時,需要顯示日志的標題,以及日志的ID來創建到查看日志的鏈接。
搜索結果模板sample.xml
?
?
?
每個result就是一個搜索結果,為了處理沒有找到相關內容的情況,我定義了當搜索結果為空時logid為#。
在完成XML文檔模板之后,就可以用ASP來動態生成搜索結果需要的XML文檔了。搜索的關鍵字采用POST方式來傳遞。
搜索結果輸出ajaxsearch.asp
有了后臺搜索結果輸出的部分,就可以開始寫前臺搜索的部分了。
首先需要的是給用戶輸入搜索關鍵字及顯示搜索結果的地方,我用div來分別顯示這兩個部分:
ajaxsearch.htm
?
?
完成了用戶輸入及結果輸出的部分,就可以開始寫最后的部分——客戶端程序了。
首先是創建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="
";
??return;
?}
?document.getElementById("search_result").innerHTML="
";
?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+"
?else
??for(i=0;i
?strTemp=strTemp+"
?document.getElementById("search_result").innerHTML = strTemp
}
?
?
?
?
至此,一個完整的AJAX實例完成了。
幾個經驗:
1.?頁面使用UTF-8編碼,這樣可以省卻很多煩惱
2.?在獲取搜索結果時,因為用的getElementsByTagName,返回的是一個集合,所以要在結果之后加上下標,如例子中的:
????results[i].getElementsByTagName("logid")[0].firstChild.data
3.?建議使用document.getElementById()來獲取對象,而不要使用document.all這樣的方法
小編帶來的這篇AJAX實現無刷新登錄功能,是不是特別的實用呢,更多關于AJAX的內容,可以多多關注下錯新技術頻道,我們會不斷的更新。
新聞熱點
疑難解答
圖片精選