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

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

<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实现.

$(function(){
 2var items=$(".ajax-container");
 3    items.mouseup(function(e){
 4if(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(/^.*\?/,""));
 9var hash=[];
10            items.each(function(i){
11var item=$(this).attr("hash");
12if(item){
13                    hash.push(i +"|"+ escape(item));
14                }
15            });
16            $.history.load(hash);
17        }
18    });
19    $.history.init(function(hash){
20var state={};
21        $.each(hash.toString().split(","),function(i,n){
22            parts=unescape(n).split("|");
23if(parts.length>1){
24                state[Number(parts[0])]=parts[1];
25            }
26        });
27        items.each(function(i){
28var container=$(this);
29if(state[i]){
30                container.find(".ajax-content").html(state[i]);
31            }
32else{
33var item=$(this).attr("hash");
34if(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被全部覆盖都不需要重新绑定.