[Ajax] AJAX初体验之-在博客中添加无刷新搜索
现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务。而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏。要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索。
在本篇教程中,数据库的表名和日志查看页面以L-Blog为例,因为我的博客程序是从L-Blog修改而来^_^。
本教程中的例子已经通过实际测试,可以直接在L-Blog或FBS中使用。当然,要真正应用的话还是需要做一些美化及完善的。
在数据库中日志内容数据表名为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>"
' 循环输出搜索结果
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稍有接触应该都看得懂这段代码,前篇教程中也有详细注释:
ajaxsearch.js(第一部分)
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(第二部分)
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><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(第三部分)
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实例完成了。
几个经验:
1. 页面使用UTF-8编码,这样可以省却很多烦恼
2.
在获取搜索结果时,因为用的getElementsByTagName,返回的是一个集合,所以要在结果之后加上下标,如例子中的:
results[0].getElementsByTagName("logid")[0].firstChild.data
3.
建议使用document.getElementById()来获取对象,而不要使用document.all这样的方法。
[Ajax] AJAX初体验之-在博客中添加无刷新搜索的更多相关文章
- 在CSDN博客中添加量子恒道统计功能的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 什么是量子恒道统计?量子恒道统计是一套免费的网站流量统计分析系统.致力于为所有个人站长.个人博主.所有网站管理者.第三 ...
- 在jekyll模板博客中添加网易云模块
最近使用GitHub Pages + Jekyll 搭建了个人博客,作为一名重度音乐患者,博客里面可以不配图,但是不能不配音乐啊. 遂在博客里面引入了网易云模块,这里要感谢网易云的分享机制,对开发者非 ...
- cnbolgs博客中添加Latex支持
参考:http://www.cnblogs.com/ilogic/archive/2012/08/05/latex.html 主要是利用在线生成公式的工具:MathJax,但要在博客上获得 MathJ ...
- ZH奶酪:在博客中添加Latex公式
1. 点击编辑器中的插入图片: 2.在URL输入下边的地址: http://latex.codecogs.com/gif.latex?你的latex代码 就可以了-
- 给自己的博客上添加个flash宠物插件
前言 最近在一些博主的博客上看到一些小宠物的挂件,很有趣,访客到了网站后可以耍耍小宠物,增加网站的趣味性,在功能强大的博客系统上看到有这样的小宠物挂件还是蛮有趣的. 正文 下面就简单介绍下如何在博客园 ...
- 如何给自己的博客上添加个flash宠物插件
最近在一些博主的博客上看到一些小宠物的挂件,很有趣,访客到了网站后可以耍耍小宠物,增加网站的趣味性,在功能强大的博客系统上看到有这样的小宠物挂件还是蛮有趣的. 多次差找资料后,终于在http://ww ...
- 在博客中显示图片_Mac版
主要是防止自己忘掉 为了解决一开始自己想在写入的博客中添加本地图片,直接链接的话在自己的电脑倒是可以显示图片,但是在别人的电脑上就没办法加载图片了,问各路大神也没人愿意解答,百度也没有想要的答案,只好 ...
- 借用Snippet插件美化博客中的代码
书写博客,难免要贴出代码.然而直接贴出代码,则不美观.于是,应运而生出现了很多代码美化的插件.其中比较有名的是Syntax Highlighting插件. 笔者在网上翻阅的时候发现了Snippet ...
- 在hexo静态博客中利用d3-cloud来展现标签云
效果: http://lucyhao.com/tags/ hexo自带的tag cloud的标签展现不太美观,想能够展现出“云”效果的标签.在网上找到了d3-cloud这个项目,github地址:ht ...
随机推荐
- android 后台 activity 被系统回收 保存状态
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha 活动被系统回收, 要保存状态 ,用到 活动的 在保存实例时候 的 这个方法. 当系统异常 ...
- [CC-SUBWAY]Subway Ride
[CC-SUBWAY]Subway Ride 题目大意: 一棵\(n(n\le5\times10^5)\)个点的含重边的树,总边数为\(m(m\le10^6)\),每条边有一个颜色.\(q(q\le5 ...
- sgu 194 上下界网络流可行流判定+输出可行流
#include <cstdio> #include <cstring> #define min(a,b) ((a)<(b)?(a):(b)) #define oo 0x ...
- bzoj 3105
感觉这题出得真好. 我们将问题简化过后是这样的: 给定一个数集,找一个最大的非空子集(一个集合的大小是它的元素和)A,使得A不存在一个非空子集,其所有元素的异或和为0. 因为我们始终可以只选一个数,所 ...
- hdu 4277 USACO ORZ DFS
USACO ORZ Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- hdu 4451 Dressing 排列组合/水题
Dressing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- Windows下openssl安装及使用
配置过程中需要生成一些mak文件,这些生成代码用perl脚本生成,所以要安装一个ActivePerl. 网址: http://www.activestate.com/activeperl/ 下载后直接 ...
- cloc 统计代码行数工具
cloc 统计代码行数工具 官网地址:http://cloc.sourceforge.net/ 下载完成后 会生成一个.exe文件 需要修改文件名为 cloc.exe 然后把这个文件拷贝到需要统计的根 ...
- Window 8 启用 Telnet 命令工具一览图
Window 8 启用 Telnet 命令工具一览图 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创 ...
- Netdata----Linux 性能实时监测工具
https://my-netdata.io/ https://github.com/firehol/netdata/wiki http://soluck.iteye.com/blog/2291618