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

AJAX打造博客无刷新搜索

来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 13/07/11
arch("log_Title")&"]]></logtitle></result>"  
        rsSearch.MoveNext
    Loop
Else
    '' 关键字为空,则返回无搜索结果
    XML_Result=XML_Result&"<result><logid>#</logid><logtitle /></result>"
End IF
XML_Result=XML_Result&"</blogsearch>"
'' 设置MIME Type为XML文档
Response.ContentType = "application/xml"
''Response.CharSet = "utf-8"
'' 输出搜索结果
Response.Write(XML_Result)
%>

有了后台搜索结果输出的部分,就可以开始写前台搜索的部分了。
首先需要的是给用户输入搜索关键字及显示搜索结果的地方,我用div来分别显示这两个部分:

ajaxsearch.htm


复制代码 代码如下:
<!-- 要用到JavaScript,外部链入 -->
<script type="text/javascript" src="ajaxsearch.js"></script>
<!-- 用户输入部分 -->
<div>
    <!-- 因为没有用form,所以要处理input的keydown事件。在用户按下回车后搜索 -->
    <input type="text" id="searchword" onkeydown="if(event.keyCode==13) AjaxSearch();" /> 
    <!-- 搜索按钮 -->
    <input type="button" onclick="AjaxSearch();" value="搜索" />
</div>
<!-- 搜索结果显示部分 -->
<div id="search_result">
    <!-- 初始时提示用户输入搜索关键字 -->
    <ul><li>请输入关键字</li></ul>
</div>


完成了用户输入及结果输出的部分,就可以开始写最后的部分——客户端程序了。
首先是创建XMLHttpRequest对象,这部分代码不再多说,对AJAX稍有接触应该都看得懂这段代码,前篇教程中也有详细注释:

ajaxsearch.js(part1)

复制代码 代码如下: 
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)


复制代码 代码如下:
function AjaxSearch() {
    var searchword;
    // 获取搜索关键字,并且进行URLEncode
    searchword=escape(document.getElementById("searchword").value);
    if(searchword=="") {
        // 如果关键字为空,则提示用户输入关键字
        document.getElementById("search_result").innerHTML="<ul&

网学推荐

免费论文

原创论文

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