对爬虫和用户友好的ajax分页

开门见山, 首先来看一下如下html结构…

HTML

1 < div class ="ajax-container" >
2 < div class ="ajax-content" > 初始状态0 </ div >
3 < div class ="ajax-paging" >
4 < a href ="simple.htm?p=1,5" > 1 </ a >
5 < a href ="simple.htm?p=2,5" > 2 </ a >
6 < a href ="simple.htm?p=3,5" > 3 </ a >
7 < a href ="simple.htm?p=4,5" > 4 </ a >
8 </ div >
9 </ div >
10 < div class ="ajax-container" >
11 < div class ="ajax-content" > 初始状态1 </ div >
12 < div class ="ajax-paging" >
13 < a href ="simple.htm?p=1,10" > 1 </ a >
14 < a href ="simple.htm?p=2,10" > 2 </ a >
15 < a href ="simple.htm?p=3,10" > 3 </ a >
16 < a href ="simple.htm?p=4,10" > 4 </ a >
17 </ div >
18 </ div >

上面代码定义了2个容器, 每个容器都有自己独特的内容和分页, 我们在每个分页的a标签中填写真实的地址, 方便爬虫抓取内容, 这样问题就解决了一半了.

如何体现对用户友好呢, 我们希望能实现无刷新的分页, 并且支持浏览器前进后退, 甚至刷新, 这里使用jquery history实现.

JavaScript

1 $( function (){
2 var items = $( " .ajax-container " );
3 items.mouseup( function (e){
4 if (e.target.tagName.toLowerCase() == " a " && e.target.parentNode.className.indexOf( " ajax-paging " ) >- 1 ){
5 $(e.target).one( " click " , function (e){
6 e.preventDefault();
7 });
8 $( this ).attr( " hash " ,e.target.href.replace( / ^.*\? / , "" ));
9 var hash = [];
10 items.each( function (i){
11 var item = $( this ).attr( " hash " );
12 if (item){
13 hash.push(i + " | " + escape(item));
14 }
15 });
16 $.history.load(hash);
17 }
18 });
19 $.history.init( function (hash){
20 var state = {};
21 $.each(hash.toString().split( " , " ), function (i,n){
22 parts = unescape(n).split( " | " );
23 if (parts.length > 1 ){
24 state[Number(parts[ 0 ])] = parts[ 1 ];
25 }
26 });
27 items.each( function (i){
28 var container = $( this );
29 if (state[i]){
30 container.find( " .ajax-content " ).html(state[i]);
31 }
32 else {
33 var item = $( this ).attr( " hash " );
34 if (item){
35 $( this ).find( " .ajax-content " ).html( " 初始状态 " + i);
36 $( this ).removeAttr( " hash " );
37 }
38 }
39 });
40 });
41 });

当dom加载完成以后, 我们找到所有的.ajax-container,给它绑定一个鼠标弹起事件, 当弹起事件是在.ajax-paging中的a标签上触发的时候, 给a标签绑定一次性的点击事件取消它的默认行为, 这样就拦截了用户的点击行为, 转而把a标签中的查询参数传给jquery history.

jquery history会用location.hash保存这一参数并给浏览器添加一个history, 接着再把该参数传给我们在jquery.history.init中的自定义函数, 这时就可以利用该参数请求后台数据并填充覆盖到相应的标签上了.

为了实现一个页面上允许有多个不同的分页容器, 我们给每一个.ajax-container容器都指定一个独立的hash, 然后给jquery.history.load传入的是多个容器的hash集合, 最后在jquery.history.init的自定义函数中拆分出来处理, 当页面刷新或者jquery.history.load被调用时就会触发我们的自定义函数, 完成相应的数据绑定

这里没有在a标签上直接用jquery.live绑定可以减少的开销, 并且即使.ajax-container中的html被全部覆盖都不需要重新绑定.

转载于:https://www.cnblogs.com/cyfin/archive/2011/04/02/2003970.html