Pjax实现网页局部刷新

来源：互联网发布：软件评测师书籍编辑：程序博客网时间：2024/05/16 10:08

现在很多网站( facebook, twitter)都支持这样的一种浏览方式，当你点击一个站内的链接的时候，不是做页面跳转，而是只是站内页面刷新。这样的用户体验，比起整个页面都闪一下来说，好很多。其中有一个很重要的组成部分，这些网站的ajax刷新是支持浏览器历史的，刷新页面的同时，浏览器地址栏位上面的地址也是会更改，用浏览器的回退功能也能够回退到上一个页面。那么如果我们想要实现这样的功能，我们如何做呢？ pjax提供了一个脚本支持这样的功能。 pjax项目地址在 https://github.com/defunkt/jquery-pjax 。实际的效果见： http://pjax.heroku.com/ 没有勾选pjax的时候，点击链接是跳转的。勾选了之后，链接都是变成了ajax刷新。
下面是一个简单的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>

效果如下：
效果图

这里写图片描述

0 0