当前位置: 网学 > 编程文档 > Ajax > 正文

AJAX打造博客无刷新搜索

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 13/07/11
gt;<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)
复制代码 代码如下:
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编码,这样可以省却很多烦恼
  • 在获取搜

网学推荐

免费论文

原创论文

设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号