完成了用户输入及结果输出的部分，就可以开始写最后的部分——客户端程序了。
首先是创建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!");
}

接下来是发送搜索请求部分：

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) {
            // 状态正常
            if(xmlObj.status==200) {
                // 设置xmlResult为搜索结果XML文档
                xmlResult=xmlObj.responseXML;
                // 调用AjaxShowResult()显示搜索结果
                AjaxShowResult();
            }
        }
    }
    // 发送请求，内容为搜索的关键字
    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
        // 循环输出每个搜索结果
        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] 下一页

◎进入论坛网络编程版块参加讨论