SEO和体验并重的超连接设计

若是你要了解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"]);