关闭

Pjax实现网页局部刷新

标签: Pjax局部刷新
1862人阅读 评论(0) 收藏 举报
分类:

现在很多网站( 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

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20118次
    • 积分:405
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:9篇
    • 译文:1篇
    • 评论:5条
    文章分类
    最新评论