采用AJAX + history api做无刷新页面的分页

大家都知道浏览器有一个history对象是用来保存浏览历史的，比如一个窗口访问了两个个页面，那么history.length属性等于2.

history api在H5时代新增了两个方法，pushState和replaceState

从名字就可以知道一个是新增一条记录一个是改变当前那么记录。

用AJAX加history做分页的好处就是既提高了用户体验，支持前进后退，加快页面加载速度又对搜索引擎十分友好

首先我们来判断浏览器是否支持pushState/replaceState

if(!!(windows.history&&history.pushState)){
//支持
}else{
//不支持
}

接着我们要给当前页面添加一个State，添加之前先了解一下这两个新方法

pushState和replaceState一样有三个参数

state:一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。

title：页面的标题，但是目前所有浏览器都忽略这个值，因此这里可以填null/false

url：新的网址，为了防止恶意代码此处必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

replaceState与pushState不同的地方在于前是修改后者是新增。

那么现在就给页面添加一个State：

history.pushState({page:"page_2.html"},"page2","page_2.html"}

执行这个操作后，浏览器URL会变成 www.website.com/page_2.html,但并不会进行跳转，甚至不会对这个地址进行检查是否存在。

于此同时我们通过ajax加载页面内容，代码如下

$('a').on("click",function(e){
if(!!(windows.history&&history.pushState)){
e.preventDefault()
history.pushState({page:"page_2.html"},"page_2.html"}
ajax(page)//ajax代码就省略了，无非是局部加载内容
}else{
//不支持此方法
}
})

这样我们就完成了点击分页后添加state和加载页面内容

那当用户点击前进/后退，我们该怎么办？

这时候就要用到popstate事件。

当用户点击前进/后退或在javascript中调用history.back/forward/go时就会触发popstate事件

$(window).on("popstate",function(){
ajax(page)
})

这是还要特别注意一下，在webkit浏览器中（最新的chrome已经改正这个问题，大概是chrome 20版本之前会有这个问题，Safari的高版本没测），第一次加载页面也会触发popstate事件，所以我们也要对第一次加载进行判断

$(window).on("popstate",function(e){
varfirst_onload=(e.originalEvent.State==null)
if(first_onload){
returnfalse;
}
ajax(page)
})

由于我们对第一次加载添加了state等于null的判断，所以我们必须在第一次加载改变state，否则当用户后退到第一个页面时state又等于null，ajax就不会执行，页面内容也无法更新了

history.replaceState({{page:"page_1.html"},"page1","page_1.html")

这样一来，整个代码就完成了，完整代码如下

functionPagination(){
$('a').on("click",function(e){
if(!!(windows.history&&history.pushState)){
e.preventDefault()
varpage_url=$(this).attr("page_url")//获取page信息，根据你的需要而变
history.pushState({page:page_url},false,page_url)
ajax(page_url)//ajax代码就省略了，无非是局部加载内容
}else{
//不支持此方法
}
})

$(window).on("popstate",function(e){
varfirst_onload=(e.originalEvent.State==null)
if(first_onload){
history.replaceState({page:window.location.href},page:document.title,page:window.location.href)//给第一次加载改变state，也可以写到函数的最后
returnfalse;
}
varpage_url=$(this).attr("page_url")//获取page信息，根据你的需要而变
ajax(page_url)
})
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!