pjax使用心得

pjax将H5的pushState()接口和Ajax技术封装在一起，做到了在实现页面局部刷新的同时改变了地址栏内容。

绑定pjax事件的元素（一般为a元素）被点击或执行其他操作而触发向服务器发起数据请求时，pjax机制会首先拦截住该请求，即不让浏览器跳转到a链接的指向上去；然后将该请求封装成ajax请求，将服务器返回的HTML代码片显示在指定的容器内，同时调用pushState()接口改变浏览器的地址栏。

我们都知道，pjax请求到的不是json数据，也不是完整的HTML页面，而是需要显示在局部的HTML碎片，那么我们作为开发者需要做哪些工作？最开始学习pjax的时候总是以为这部分HTML碎片是由pjax内部机制自动处理的，其实不然。

以welefen的开源pjax版本为例，首先根据源文档说明，引入js文件，赋予$.pjax(options)的各项参数值，具体参数解释这里不再赘述，网上解释资料很多（参考解释：可以看这里，这篇文章就是原作者welefen的说明）。其中的container参数就是要实现局部刷新的容器，也就是这个容器的内容会在地址栏变化的同时发生内容的更新，其它元素均不会重新加载。那么关键问题来了，pjax请求到的数据从哪里来？其实，粗略理解的话，pjax请求的也是一个页面，譬如，我点了一个绑定了pjax事件的a链接，其实就是向服务器要了一个页面（就是a链接的href）。但是这个页面的哪些部分需要重新请求、哪些部分不需要重新请求，这部分的工作还是需要我们自己来处理的；pjax提供了一个机制：自动将你处理好的需要重新请求的HTML片段填充到container中。说白了就是在这个a链接指向的页面中做一些处理：哪些HTML元素是需要局部加载的就只显示哪些HTML元素。当然这是在该请求是pjax请求的前提下，非pjax请求自然就要返回完整页面：通过判断该请求是否有名称为X-PJAX的请求头来判断是否是pjax请求，asp.net中的处理示例：Request.Headers["X-PJAX"]==null?false:true。这部分的工作处理好了，当我们点击a链接的时候服务器就会把我们想要的HTML片返回到浏览器，pjax会自动将该部分HTML碎片填充到container中显示处理，同时调用pushState()接口完成这个过程。对于这部分的解释网上的大部分文章都没有说的很清楚，资料又是东拼西凑的不系统，结果让像我这样的菜鸟在看的时候一头雾水，直到自己实现出来才算彻底明白其中的机理。

如果看到这里你还不是很清楚，不妨参看一下这里的例子（打开sln文件后浏览pjax下的aaaa.aspx、bbbb.aspx等等即可），结合我的说明相信很快能理解并会用pjax啦。

写这篇文章主要是为了加深自己的印象，建议大家也可以在自己掌握一项新技能的时候通过写心得写体会的方式强化一下。