什么是Pjax？

pjax=history . pushstate Ajax=history . pushstate Async JS XML(xhr？)BOM对象历史已经增强了一波，主要是针对历史栈的操作。过去，只有替换、走等。会跳转并刷新整个页面。现在，有pushState、replaceState等。它只是操作历史堆栈，但只是修改历史堆栈的内容，没有副作用(页面不会跳转和刷新)。

PJAX效应。

url可以跟踪ajax动态加载的内容。特别是从两步视图布局来看，该技术有很大的优势。加载页面不刷新意味着响应速度和用户体验都有了很大的提升。当静态脚本和通用模块较多时，最大限度地节省了重用零件的成本。例子可以参考目前的谷歌、facebook和新版微博，它们也是基于html5 pushState实现的。谷歌plus的表现最为明显。单击导航栏地址，箭头会随着目标移动。同时加载的页面淡入，效果刺眼。

脏网址和干净网址。

pjax出现之前，为了在不刷新的情况下加载页面并按url跟踪，浏览器需要支持window.location.hash的属性，通过判断url# anchor后记录的地址来确定要加载的内容。具体的构造方法是编写一个hashchange监控函数，当hash change被触发时，判断需要加载的内容。它的缺点是较低版本的浏览器，比如ie6，不支持hash，所以需要另建一个iframe来记录历史url，实现前向和后向。最大的问题是#之后生成的内容不会被搜索引擎索引。谷歌之前提供了解决方案，主张使用#！把地址引向一个？Escape_fragment=url在请求的地址中，我已经看到这个hash bang已经或者正在twitter、facebook、人人网、新浪微博和封闭豆瓣中使用。传#！要实现url不刷新加载，因为一般的方法不容易被搜索引擎收录(比如国内的百度)，所以叫脏url。相对来说，pjax可以使用干净的url来获得同样的效果，并且兼容各种浏览器，所以是现在最适合的方法。

用PHP jQuery实现PJAX。

没有必要从头开始编写基于pushState的javascript插件，因为jQuery已经将它作为一个项目打开了，可以轻松实现。目前我已经将其引入到正在开发的项目中，与原项目兼容性很好。除了新版微博的推广，希望观众看到我用了以后会是这个样子，你用了以后也会是这个样子。

开始前的准备工作：

1.jQuery libray

2.基于https://github.com/defunkt/jquery-pjax. jQ(github上的开源项目)的pjax插件

3.PHP项目代码(易于分享，本文使用yii框架进行演示，但实际开发中类似)。

一.前端实施

真的很好用，而且jquery-pjax插件打包的很好，绝对可以根据自己的喜好进行定制(比如复制g plus的效果)。下面是集成上述步骤的基本html示例代码：

？phpyiii :3360 app()-client script-registercorerscript(' jquery ')；yii : app()-client script-registerScriptFile(yii : app()-base URL。/js/jquery-pjax/jquery . pjax . js’)；//以您存放pjax的实际位置为准？div id='nav' a href='？PHP echo yii :3360 app()-create URL(' article/index ')；'Article/a/divdiv id='main '替换了content/div脚本类型=' text/JavaScript' $(文档)。ready (function () {$ ('# main '))。pjax(' a ')；});/script的最终目的是在点击a标签时，通过ajax返回的结果，将id为main的div中的文本替换为对应的地址内容，这样url会自动更新，页面不会重新加载。让我们开始实现后端应该处理什么。

二、PHP的实现。

php需要处理两个主要任务：1。实现布局视图的布局；2.判断pjax的请求。

在Yii框架中的实现：

该动作在控制器中处理如下(以文章索引为例):

公共函数actionIndex(){ $ this-layout='//layouts/column 1 '；$dataProvider=新的CActiveDataProvider('Article '，array(' criteria '=array(' order '=' create _ time desc '))；if(array _ key _ exists(' HTTP _ X _ PJAX '，$ _ SERVER)$ _ SERVER[' HTTP _ X _ PJAX ']){ $ this-render partial(' index '，array(' data provider '=$ data provider，)；} else { $this-render('index '，array(' data provider '=$ data provider，)；}}效果演示图：

单击文章链接或文章链接，将出现以下效果页面：

-

使用jquery-pjax的注意事项：

1.返回的模板内容不能是纯文本，需要用html标记包装。

2.有关插件使用的详细信息，请参考github的项目描述。更新后，使用方法可能有所不同。

3.对于不支持pushstate的低版本浏览器，pjax插件会自动判断并使用传统的页面加载模式。

4.当一个页面的pjax请求时间超过设定时间时，会通过刷新加载，需要调整插件中的相关参数。

本文的全部内容已经描述完毕，希望对大家学习pjax(pushstate ajax)有所帮助。