相信很多人对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时,它的链接和请求如下:

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

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

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

点击在这里下载Demo

Pjax介绍及在asp.net MVC3中使用pjax的简单示例的更多相关文章

  1. 在 ASP.NET Core 中使用 ApplicationPart 的简单示例

    1. 项目截图: 2. 代码 <Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <TargetFra ...

  2. ASP.NET MVC3中Model验证

    原文:ASP.NET MVC3中Model验证 概述 上节我们学习了Model的数据在界面之间的传递,但是很多时候,我们在数据传递的时候为了确保数据的有效性,不得不给Model的相关属性做基本的数据验 ...

  3. 在ASP.NET MVC3 中利用Jsonp跨域访问

    在ASP.NET MVC3 中利用Jsonp跨域访问 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复 ...

  4. Asp.net MVC3 中,动态添加filter

    Asp.net MVC3 中,动态添加filter filter是attribute,不支持泛型,传入的参数必须是固定的值.总之很受attribute本身的限制. 发现一篇老外的文章,动态设置filt ...

  5. (转)在ASP.NET MVC3 中利用Jsonp跨域访问

    原文地址:http://www.cnblogs.com/skm-blog/p/3431999.html 在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用 ...

  6. 在ASP.NET MVC3 中利用JSONP跨域登录WEB系统

    在信息系统开发的时,根据相关业务逻辑难免会多系统之间互相登录.一般情况下我们需要在多系统之间使用多个用户名和密码.这样客户就需要在多个系统之间重复登陆.每次登录都需要输入用户名和密码.最近比较流行的就 ...

  7. Asp.net MVC3中全局图片防盗链

    怎么样在Asp.Net MVC3中做到全局图片防盗链?如果熟悉Asp.Net的页面生命周期,相信解决这个问题应该很容易.下面就演示一下如何去做? 一.首先是全局的,我们肯定要在Global.asax文 ...

  8. jQuery Uploadify在ASP.NET MVC3中的使用

    1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. Uploadify官方网址:http://www.uploadif ...

  9. 使用注解注入properties中的值的简单示例

    spring使用注解注入properties中的值的简单示例   1.在web项目的src目录下新建setting.properties的文件,内容如下: version=1 2.在spring的xm ...

随机推荐

  1. 三、Socket之UDP异步传输文件-多文件传输和文件MD5校验

    本文接着上一篇文章二.Socket之UDP异步传输文件,在上一篇文章的基础上实现多文件的传输和文件传输完成后进行完整性校验. 要实现多文件的传输,必须要对文(2)中发送文件的数据格式进行改进,必须加入 ...

  2. Tips: compilation and creating new projects on Android 4.0

    If you have downloaded android 4.0, you should read the article. $ANDROID_ROOT/tools/android.bat is ...

  3. 明天参加GDG devfest

    明天就可以第二次去参加devfest了,还记得去年去的时候是个啥也听不懂的小白,希望今年能够收获更多,结识更多大牛和志同道合的伙伴.

  4. WebGoat视频教程下载

    WebGoat视频教程下载:http://pan.baidu.com/s/1pJlsfQ7

  5. typedef的使用2——定义函数

    #include <stdio.h> #include <string.h> #pragma warning(disable:4996) //闲言碎语都先不要讲了,直接上函数吧 ...

  6. 一些ecplise 快捷键

    1 F5:下一步,可以进入下一个函数栈 2 F6:当前函数的下一步,不会进入其他的函数. 3 F8:下一个断点. 4 选中一个变量或者表达式,按ctrl+shift+i 来查看内容或者添加监视的方式. ...

  7. gVim多标签页

    我们一般使用的文本编辑器,如:editplus.ultraEdit等都是支持多标签页的,可以同时打开多个文件,方便切换,以前gVim只能打开多个窗口,或者一个窗口切出多个窗口来编辑,自从7.0以后Vi ...

  8. mysql同时向一个表中插入多条数据问题!!见详细

    INSERT INTO `表名` (`字段1`,`字段2`,`字段3`,`字段4`) values ('数组1数据1','数组1数据2','数组1数据3','数组1数据4'), ('数组2数据1',' ...

  9. 要源码的快来啊,价值500的OA商业源码免费送给大家,望大家年底奖金多多......

    功能介绍: 兼容IE6,7,8以上.GooleChrome.360及遨游等浏览器. 系统特色: 1.系统经过抗压测试. 2.语音提示功能. 3.支持office2007在线编辑. 4.强大的图形化工作 ...

  10. getOutputStream() has already been called for this response异常的原因和解决方法

    今天在调试一个小web项目时,验证码不显示了,而且后台报错 getOutputStream() has already been called for this response 经过查找得知: 在t ...