Pjax介绍及在asp.net MVC3中使用pjax的简单示例

时间:2021-05-19 16:35:01

相信很多人对ajax并不陌生,对ajax的一些优点也了如指掌,如:局部刷新改善用户体验,减少开销,让服务器和浏览器之间的响应更快等。

但是它的缺点也是很显而易见的:

  1. AJAX大量的使用了javascript和ajax引擎,这些取决于浏览器的支持.在编写的时候考虑对浏览器的兼容性.
  2. AJAX只是局部刷新,所以页面的后退按钮是没有用的.
  3. 对流媒体还有移动设备的支持不是太好
  4. 由于AJAX只是局部刷新,因此对搜索引擎不友好,不利于搜索引擎优化(SEO)。

然而现在部分网站(http://plus.google.comhttp://www.github.com/) 都支持这样的一种浏览方式:当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验,  比起整个页面都闪一下来说, 好很多。 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时,  浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能, 我们如何做呢?

什么是pjax

在HTML5之前的版本,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。

从HTML5开始,我们可以开始操作这个历史记录堆栈。HTML5的history提供了两个新特性pushState和replaceState通过这两个方法我们可以对history实体进行添加和修改,从而可以在不刷新页面的前提下添加和修改history以实现浏览器的前进和后退。

pjax即pushState+ajax,页面之间的点击是通过ajax异步请求的,同时对于整个页面来说URL地址却发生了变化,然而页面却并没有刷新,并且可以支持浏览器的前进和后退。

关于pjax的用法可以参考https://github.com/defunkt/jquery-pjax上的说明,我这里写了一个简单地例子,可以看到使用pjax和不使用pjax浏览器地址和请求数的变化。

这里写了几个关于<a>导航的请求。

下面是首页:

Pjax介绍及在asp.net MVC3中使用pjax的简单示例

当使用pjax时,它的链接和请求如下:

Pjax介绍及在asp.net MVC3中使用pjax的简单示例

不使用pjax时,它的链接和请求如下:

Pjax介绍及在asp.net MVC3中使用pjax的简单示例

我们可以看到,虽然地址是一样的,但是pjax的请求数明显少于常规方法。

当然,关于html5的新特性,只能在支持html5的浏览器中使用,在不支持html5的浏览器中,还是会使用常规的方法。

点击在这里下载Demo