平武建站

AJAX怎么实现博客无刷新搜索功能

这篇文章主要讲解了“AJAX怎么实现博客无刷新搜索功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“AJAX怎么实现博客无刷新搜索功能”吧！

专注于为中小企业提供网站制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业平昌免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

搜索结果模板sample.xml

代码如下:




   
   
       
        1
       
        AJAX初体验之上手篇
   

每个result就是一个搜索结果，为了处理没有找到相关内容的情况，我定义了当搜索结果为空时logid为#。
在完成XML文档模板之后，就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。

搜索结果输出ajaxsearch.asp

代码如下:




<%
' commond.asp为数据库连接文件
' function.asp中有要用到的函数CheckStr
Dim Search_Word,XML_Result,rsSearch,sqlSearch
Set rsSearch=Server.CreateObject("ADODB.RecordSet")
' 获取搜索关键字
Search_Word=CheckStr(Trim(Request.Form("searchword")))
' XML文档头
XML_Result=""
IF Search_Word<>Empty Then
    ' 创建查询SQL语句
    sqlSearch="SELECT log_ID,log_Title,log_Content FROM blog_Content WHERE log_Title LIKE '%"&Search_Word&"%' AND log_IsShow=True ORDER BY log_ID DESC"　
    ' 打开记录集
    rsSearch.open sqlSearch,Conn,1,1
    ' 如果没有搜索结果就产生一个结果，logid为#，标志着没有搜索结果
    IF rsSearch.BOF AND rsSearch.EOF Then XML_Result=XML_Result&"#"　
    ' 循环输出搜索结果
    Do While Not rsSearch.EOF
        ' 循环输出每一个结果
        XML_Result=XML_Result&""&rsSearch("log_ID")&""　 
        rsSearch.MoveNext
    Loop
Else
    ' 关键字为空，则返回无搜索结果
    XML_Result=XML_Result&"#"
End IF
XML_Result=XML_Result&""
' 设置MIME Type为XML文档
Response.ContentType = "application/xml"
'Response.CharSet = "utf-8"
' 输出搜索结果
Response.Write(XML_Result)
%>

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

ajaxsearch.htm

代码如下:






   
    　
   
   



   
   
  • 请输入关键字

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

  • 请输入关键字!
";
        return;
    }
    // 给出提示，正在搜索
    document.getElementById("search_result").innerHTML="
  • 正在加载，请稍候
";
    // 打开一个连接，采用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="

    ";
        // 首先判断搜索结果是否为空
        if(results[0].getElementsByTagName("logid")[0].firstChild.data=="#")
            // 是空，则显示没有符合的搜索结果
            strTemp=strTemp+"
  • 无搜索结果
    • ";
        else
            // 循环输出每个搜索结果
            for(i=0;i            strTemp = strTemp + "
  • " + results[i].getElementsByTagName("logtitle")[0].firstChild.data + "
    • ";　
        strTemp=strTemp+"
";
    // 显示搜索结果
    document.getElementById("search_result").innerHTML = strTemp
}

至此，一个完整的AJAX实例完成了。

感谢各位的阅读，以上就是“AJAX怎么实现博客无刷新搜索功能”的内容了，经过本文的学习后，相信大家对AJAX怎么实现博客无刷新搜索功能这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


文章标题：AJAX怎么实现博客无刷新搜索功能
URL分享：http://pwwzsj.com/article/gdsshh.html

其他资讯