如果你要了解PJAX,请看:
AJAX + window.history.pushState/onpopstate (需要HTML5支持)
https://github.com/defunkt/jquery-pjax
我下面说的是锚点链接(书签链接)这个方案:
AJAX + window.location.hash/onhashchange (兼容IE8)
拿首页分页链接来说:
<a href="/index.php?page=3" onclick="page(3);return false;">3</a>搜索引擎的爬虫会根据href访问/index.php?page=3获取第3页数据,利于SEO.
用户在浏览器里右键选择"在新标签页中打开"也能正常访问到/index.php?page=3.
如果用户在页面直接点击链接,则触发click事件,
由JS通过AJAX加载并渲染局部数据,
以及设置location.hash为/index.php#/page/3.
location.hash = "#/page/3";浏览器能够自行记住location.hash历史记录,
我们只需监听location.hash改变的事件hashchange(支持IE8,不支持IE7/6)
就能实现用户点击浏览器返回按钮时重新加载页面的效果.
$(window).on("hashchange", function(){
alert(location.hash); //假如输出#/page/2
var arr = location.hash.split("/"); // ["#", "page", "2"]
switch(arr[1]) {
cace "page":
ajax_page(arr[2]); //AJAX局部加载第2页数据
//location.href = "/index.php?page="+arr[2]+"&"+new Date().getTime(); //直接访问第2页
break;
case "post":
ajax_post(arr[2]); //post.php?id=1024&ajax=1478791719965
break;
}
});分页:
index.php?page=3
index.php#/page/3
ajax_page(3); //index.php?page=3&ajax=1478791719965
文章页:
post.php?id=1024
post.php#/id/1024
ajax_post(1024); //post.php?id=1024&ajax=1478791719965
URI中带有参数ajax的请求,PHP返回JSON数据:
{"title":"标题","main":"<div id=\"main\">正文(JS统计需要放这里)<\/div>"}参数ajax的内容是时间戳,避免浏览器使用缓存.
可以考虑把参数ajax的内容设为"年月日时分"的组合,让数据在浏览器缓存1分钟.
2016-08-01 08:06:00
2016-08-01 08:07:00
像PJAX一样,ajax_page是用户点击触发的,所以并不需要获取keywords那些SEO的东西,只需更新标题和内容即可.
<title>标题</title>
<div id="main">正文(JS统计需要放这里)</div>
document.title = data["title"];
$("#main").html(data["main"]);
