Pjax实现网页局部刷新
2015-07-10 15:53
309 查看
现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都闪一下来说, 好很多。 其中有一个很重要的组成部分, 这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能, 我们如何做呢? pjax提供了一个脚本支持这样的功能。 pjax项目地址在 https://github.com/defunkt/jquery-pjax 。 实际的效果见: http://pjax.heroku.com/ 没有勾选pjax的时候, 点击链接是跳转的。 勾选了之后, 链接都是变成了ajax刷新。
下面是一个简单的Pjax例子,其中内容大致相同,除了跳转部分
第一页:
第二页:
效果如下:
下面是一个简单的Pjax例子,其中内容大致相同,除了跳转部分
第一页:
<?php $a=apache_request_headers(); if(empty($a["X-PJAX"])){ }else{ echo "<h1>啦啦啦啦啦啦啦我是1 iam from php</h1>Go to <a id='aaa' href='index2.php'>去2</a>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <h1>啦啦啦啦啦啦啦</h1> <div class="container" id="pjax-container"> <h1>啦啦啦啦啦啦啦我是1</h1> Go to <a id="aaa" href="index2.php">去2</a> </div> <h1>啦啦啦啦啦啦啦</h1> <div id="loading" style="display:none;position:fixed;top: 0;left: 0;bottom: 0;right: 0;padding-top: 190px;background: rgba(255,255,255,0.8);z-index: 9999;text-align: center;color: #767676;"> <p><img alt="" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64"></p> <p>Loading…</p> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="pjax.js"></script> <script> $(document).pjax('#aaa', '#pjax-container'); $(document).on("pjax:send", "#pjax-container", function() { $('#loading').show(); }); $(document).on("pjax:complete", "#pjax-container", function(t) { $('#loading').hide(); }); $(document).on("pjax:timeout", "#pjax-container", function() { return !1 }); $(function(){ var mydate = new Date(); var t=mydate.toLocaleString(); $("h1").append("<i>"+t+"</i>"); }); </script> </body> </html>
第二页:
<?php $a=apache_request_headers(); if(empty($a["X-PJAX"])){ }else{ echo "<h1>啦啦啦啦啦啦啦我是2 iam from php</h1>Go to <a id='aaa' href='index1.php'>去1</a>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <h1>啦啦啦啦啦啦啦</h1> <div class="container" id="pjax-container"> <h1>啦啦啦啦啦啦啦我是2</h1> Go to <a id="aaa" href="index1.php">去1</a> </div> <h1>啦啦啦啦啦啦啦</h1> <div id="loading" style="display:none;position:fixed;top: 0;left: 0;bottom: 0;right: 0;padding-top: 190px;background: rgba(255,255,255,0.8);z-index: 9999;text-align: center;color: #767676;"> <p><img alt="" height="64" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-128.gif" width="64"></p> <p>Loading…</p> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="pjax.js"></script> <script> $(document).pjax('#aaa', '#pjax-container'); $(document).on("pjax:send", "#pjax-container", function() { $('#loading').show(); }); $(document).on("pjax:complete", "#pjax-container", function(t) { $('#loading').hide(); }); $(document).on("pjax:timeout", "#pjax-container", function() { return !1 }); $(function(){ var mydate = new Date(); var t=mydate.toLocaleString(); $("h1").append("<i>"+t+"</i>"); }); </script> </body> </html>
效果如下:
相关文章推荐
- ajax局部刷新一个div下jsp内容的方法
- jquery ajax 局部刷新小案例
- 使用ajax局部刷新gridview进行数据绑定示例
- JQuery的Ajax请求实现局部刷新的简单实例
- 使用pjax实现无刷新更改页面url
- 有关于整体刷新和局部刷新frameset窗口
- OC笔记 - tableView的编辑模式、UITabBarController(2015.3.20)
- ajax局部刷新,定时更新
- ruby on rails 局部刷新
- Ajax实现局部刷新
- Pjax的介绍及妙用
- java web开发:ajax技术(一)——局部刷新技术的实现
- java web开发:Ajax技术(四):DWR——WEB远程调用框架
- java web开发:ajax技术(五)——锋利的JQuery
- ASP.NET MVC Partial View 和 Child Action
- php开发之Ajax异步网络请求
- 使用pjax_rails实现局部页面刷新
- 实现单文件上传,页面局部刷新
- php ajax 局部刷新
- c# ScriptManager 刷新区域 刷新后 jquery 失效 解决 UpdatePanel