使用Ajax实现页面内容和地址栏URL的无刷新更改

当参观现烧抛媚眼加，细心的用户会发现页之间的点击是通过AJAX异步请求，和网页的URL已经改变了。它可以支持向前和向后的浏览器很好。我不禁要问，这样一个强大的功能是什么

HTML5是新的API，这是history.pushstate和history.replacestate，使无刷新的页面的URL的变化通过这个接口。

与传统ajax的区别

传统的Ajax存在以下问题：

尽管Ajax可以在不刷新的情况下更改页面的内容，但它不能更改页面URL。

第二，为了更好的访问，内容更改后，更改URL的哈希值，但是哈希处理不能处理浏览器的进度和向后等等。

一些浏览器推出了onhashchange接口和不支持的浏览器只能定期确定哈希的变化

再次，Ajax的使用对搜索引擎非常不友好，而且经常在区域爬行的蜘蛛是空的。

为了解决传统Ajax的问题，介绍了HTML5，是新的API，history.pushstate，history.replacestate

浏览器历史可以操纵通过pushstate和replacestate接口，和当前页面的URL改变。

是的pushstate添加指定的URL到浏览器的历史，和replacestate是与当前的URL替换指定的URL。

如何调用

复制代码代码如下所示：

var状态= {

标题，

Url: options.url,

其他：othervalue

}；

window.history.pushstate（州、document.title，URL）；
除了标题和URL，状态对象还可以添加其他数据，例如：希望保存一些配置以发送Ajax。

replacestate和pushstate是相似的，而不需要更多的解释。

如何响应浏览器的前后操作

的onpopstate事件在窗口对象，并通过对上述状态对象将成为一个孩子的对象的事件让存储的标题和URL可以得到。

复制代码代码如下所示：

Window.addEventListener（'popstate功能（e）{

如果（历史，状态）{

无功状态= e.state；

/ /做某事（state.url，状态。标题）；

}

}，假）；
这是一个完美的结合了Ajax和pushstate无刷新浏览。

一些限制

1，不能跨域，这是必然的。曾经在网上引用过一句经典的话：如果javaｓｃｒｉｐｔ可以跨域，那么他可以守卫！

2。虽然状态对象可以存储很多自定义属性，但该值不能为对象。

与后端相对应的一些处理

这种模式不仅可以在不使用Ajax的情况下刷新浏览，而且还可以直接改变请求后直接查看URL，因此后端需要处理这些过程。

1，一个特殊的头可以发送到Ajax结合pushstate，如：setrequestheader（'pjax '，'真正的'）。

2、当后端获取头pjax = true，总体的页面部分没有输出。例如，PHP可以通过以下判断

复制代码代码如下所示：

功能is_pjax（）{

返回array_key_exists（'http_x_pjax，_server美元美元）_server { 'http_x_pjax} =真实；

}
虽然只有pushstate，replacestate，和onpopstate界面上，仍然有很多工作要做，当你使用它。

以上是本文的全部内容，希望大家能喜欢。