- 时间:2020-09-17 04:33 编辑: 来源: 阅读:
- 扫一扫,手机访问
摘要:AJAX初体验之实战篇——打造博客无刷新搜索
如果你对AJAX不是很了解,可以先看看这篇教程的前篇[url=http://www.xujiwei.cn/blog/blogview.asp?logID=430]《AJAX初体验之上手篇》[/url]。
现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务。而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏。要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索。
在本篇教程中,数据库的表名和日志查看页面以L-Blog为例,因为我的博客程序是从L-Blog修改而来^_^。
本教程中的例子已经通过实际测试,可以直接在[url=http://www.loveyuki.com/]L-Blog[/url]或[url=http://www.afdream.com/]FBS[/url]中使用。当然,要真正应用的话还是需要做一些美化及完善的。
在数据库中日志内容数据表名为blog_Content,其中日志ID为log_ID,日志标题为log_Title,日志查看页面为blogview.asp,参数为日志logID。有了这些资料,就可以开始创建搜索结果的XML文档模板了。在显示搜索结果时,需要显示日志的标题,以及日志的ID来创建到查看日志的链接。
[b]搜索结果模板sample.xml
[/b]
[url=blogview.asp?logID=] strTemp=strTemp+"</ul>";
document.getElementById("search_result").innerHTML = strTemp
}
至此,一个完整的AJAX实例完成了。
几个经验:
1. 页面使用UTF-8编码,这样可以省却很多烦恼
2. 在获取搜索结果时,因为用的getElementsByTagName,返回的是一个集合,所以要在结果之后加上下标,如例子中的:
results[i].getElementsByTagName("logid")[b][0][/b].firstChild.data
3. 建议使用document.getElementById()来获取对象,而不要使用document.all这样的方法
参考资料:
1.
《AJAX初体验之上手篇》[/url]
2. [url=http://www.surfchen.org/?p=127]发布三个ajax相关的函数,包括无刷新提交表单等[/url]
[img]http://www.xujiwei.cn/blog/images/download.gif[/img]
[url=http://www.xujiwei.cn/blog/attachments/month_0607/khao_ajaxsearch.rar]实例中的三个文件打包下载[/url]