分享
 
 
 

使用AJAX技术打造博客无刷新搜索引擎

王朝other·作者佚名  2008-05-30
窄屏简体版  字體: |||超大  

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

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

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

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

搜索结果模板sample.xml

CODE:

<?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

CODE:

<!-- #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

CODE:

<!-- 要用到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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有