中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

完成了用戶輸入及結果輸出的部分，就可以開始寫最后的部分——客戶端程序了。
首先是創(chuàng)建XMLHttpRequest對象，這部分代碼不再多說，對AJAX稍有接觸應該都看得懂這段代碼，前篇教程中也有詳細注釋：

ajaxsearch.js(part1)

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

接下來是發(fā)送搜索請求部分：

ajaxsearch.js(part2)

CODE:
function AjaxSearch() {
    var searchword;
    // 獲取搜索關鍵字，并且進行URLEncode
    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>";
    // 打開一個連接，采用POST
    xmlObj.open ("POST", "ajaxsearch.asp", true);
    // 設置請求頭，表單內容格式為URLEncoded
    xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    // 設置完成請求后響應函數
    xmlObj.onreadystatechange=function() {
        // 完成響應
        if(xmlObj.readyState==4) {
            // 狀態(tài)正常
            if(xmlObj.status==200) {
                // 設置xmlResult為搜索結果XML文檔
                xmlResult=xmlObj.responseXML;
                // 調用AjaxShowResult()顯示搜索結果
                AjaxShowResult();
            }
        }
    }
    // 發(fā)送請求，內容為搜索的關鍵字
    xmlObj.send("searchword="+searchword);
}

最后是搜索結果的顯示：

ajaxsearch.js(part3)

CODE:
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
        // 循環(huán)輸出每個搜索結果
        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實例完成了。

幾個經驗：

• 頁面使用UTF-8編碼，這樣可以省卻很多煩惱
• 在獲取搜索結果時，因為用的getElementsByTagName，返回的是一個集合，所以要在結果之后加上下標，如例子中的：
      results[0].getElementsByTagName("logid")[0].firstChild.data
• 建議使用document.getElementById()來獲取對象，而不要使用document.all這樣的方法

實例中三個文件打包下載：ajaxsearch.rar

經典論壇討論：
http://bbs.blueidea.com/thread-2661871-1-1.html

出處：藍色理想
責任編輯：moby

上一頁 AJAX打造博客無刷新搜索 [1] 下一頁

◎進入論壇網絡編程版塊參加討論