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

这篇文章主要介绍“AJAX怎么实现无刷新搜索功能”，在日常操作中，相信很多人在AJAX怎么实现无刷新搜索功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”AJAX怎么实现无刷新搜索功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

在数据库中日志内容数据表名为blog_Content，其中日志ID为log_ID，日志标题为log_Title，日志查看页面为blogview.asp，参数为日志logID。有了这些资料，就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时，需要显示日志的标题，以及日志的ID来创建到查看日志的链接。
搜索结果模板sample.xml

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<blogsearch> 
    <!-- 每一个reslut就是一个搜索结果 --> 
    <result> 
        <!-- 日志的ID --> 
        <logid>1</logid> 
        <!-- 日志的标题 --> 
        <logtitle>AJAX初体验之上手篇</logtitle> 
    </result>
</blogsearch>

每个result就是一个搜索结果，为了处理没有找到相关内容的情况，我定义了当搜索结果为空时logid为#。

在完成XML文档模板之后，就可以用ASP来动态生成搜索结果需要的XML文档了。搜索的关键字采用POST方式来传递。
搜索结果输出ajaxsearch.asp

代码如下:

<!-- #include file="commond.asp" -->

<!-- #include file="include/function.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="<?xml version=""1.0"" encoding=""utf-8""?><blogsearch>"

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&"<result><logid>#</logid><logtitle /></result>"　

    End IF

    ' 循环输出搜索结果

    Do While Not rsSearch.EOF

        XML_Result=XML_Result&"<result><logid>"&rsSearch("log_ID")&"</logid><logtitle><![CDATA["&rsSearch("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稍有接触应该都看得懂这段代码，前篇教程中也有详细注释：

代码如下:

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

function AjaxSearch() {
 var searchword;
 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>";
 xmlObj.open ("POST", "ajaxsearch.asp", true);
 xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
 xmlObj.onreadystatechange=function() {
  if(xmlObj.readyState==4) {
   if(xmlObj.status==200) {
    xmlResult=xmlObj.responseXML;
    AjaxShowResult();
   }
  }
 }
 xmlObj.send("searchword="+searchword);
}

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实例完成了。

到此，关于“AJAX怎么实现无刷新搜索功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！