• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > AJAX打造博客无刷新搜索

AJAX打造博客无刷新搜索

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了AJAX打造博客无刷新搜索等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

 

现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务。而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏。要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索。

在本篇教程中,数据库的表名和日志查看页面以L-Blog为例,因为我的博客程序是从L-Blog修改而来。

本教程中的例子已经通过实际测试,可以直接在L-Blog或FBS中使用。当然,要真正应用的话还是需要做一些美化及完善的。

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

搜索结果模板sample.xml

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

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

搜索结果输出ajaxsearch.asp

代码如下:</div> <!-- #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>" 
    ' 循环输出搜索结果
    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>

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

ajaxsearch.htm

  代码如下:</div> <!-- 要用到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>
</div>
 

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

ajaxsearch.js(part1)

代码如下:</div> 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!");
}
</div>

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

ajaxsearch.js(part2)

  代码如下:</div> 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><
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11下拉菜单的级联操作(ajax)
  • 2017-05-11.NET2.0环境下的Ajax选型和应用(提供Demo源码下载)
  • 2017-05-11揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页
  • 2017-05-11ajax跨域(基础域名相同)表单提交的方法
  • 2017-05-11Ajax提交参数的值中带有html标签不能提交成功的解决办法(ASP.NET)
  • 2017-05-11ajax后台处理返回json值示例代码
  • 2017-05-11理解jquery ajax中的datatype属性选项值
  • 2017-05-11分享Ajax创建简单实例代码
  • 2017-05-11非常实用的ajax用户注册模块
  • 2017-05-11Ajax在请求过程中显示进度的简单实现

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Ajax读取数据之分页显示篇实现代码
    • 关于ajax的多次请求问题
    • 创建ajax对象并兼容多个浏览器
    • ajax实现输入框文字改变展示下拉列表的效果示例
    • 基于HTML5的可预览多图片Ajax上传
    • ajax结合豆瓣搜索结果进行分页完整代码
    • 浅析json与jsonp区别及通过ajax获得json数据后格式的转换
    • asp.net中mvc使用ajax提交参数的匹配问题解决探讨
    • 5款Ajax 文件上传控件
    • 原生AJAX封装的简单实现

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有