ajax缺点是破坏了浏览器的前进后退,因为ajax的请求不会留在历史记录中。pjax就不一样了,pjax被解释成ajax+pushState的封装,因为它把ajax的请求写入历史记录,并反映在地址栏,这样用户就能愉快地使用前进后退了。pjax有好几个实现方法,这里使用最常用的Jquery库,使用jquery.pjax.js。演示代码的服务器端使用PHP脚本语言。

  Pjax用在那儿?就说百度云盘吧,这个大家肯定都用过。百度云盘PC端,在点击打开某个文件夹后会打开这个文件夹下的文件,其实显示文件的这个div就用到了pjax技术。地址栏变换,内容更换,但是却是一个ajax请求。等到后退的时候,不必重新请求上一层文件夹的内容,因为是存在在历史记录中的。而且,开发者还可以选择时候使用cache和storage缓存。

DEMO1:

客户端:

<!DOCTYPE html>
<html>
<head>
<title>pjax</title>
<meta charset="utf-8">
</head>
<body>
<h1>My Site</h1>
<div>
Go to <a href="res1.php">第一页</a>.<a href="res2.php">第二页</a>
</div>
<div id="container"></div>
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(document).pjax('a', '#container')
</script>
</html>

服务器端:

res1.php

<?php
echo "<div style='background:red;'>第一页</div>";

res2.php

<?php
echo "<div style='background:red;'>第二页</div>";

解释:$(document).pjax('a', '#container')其中a是触发元素,#container是装载pjax返回内容的容器,下面也是这样。

DEMO2:

客户端:

<!DOCTYPE html>
<html>
<head>
<title>pjax</title>
<meta charset="utf-8">
</head>
<body>
<h1>My Site</h1>
<div>
<input type="button" id="clickMe" value="GO">
</div>
<div id="container"></div>
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$('#clickMe').click(function(){
$.pjax({
url: './res3.php',
container: '#container'
});
});
});
</script>
</html>

服务器端代码:

res3.php:

<?php
echo "<div style='background:red;'>第三页</div>";

pjax简单实例的更多相关文章

  1. Hibernate(二)__简单实例入门

    首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...

  2. 最新 Eclipse IDE下的Spring框架配置及简单实例

    前段时间开始着手学习Spring框架,又是买书又是看视频找教程的,可是鲜有介绍如何配置Spring+Eclipse的方法,现在将我的成功经验分享给大家. 本文的一些源代码来源于码农教程:http:// ...

  3. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  4. 利用navicat创建存储过程、触发器和使用游标的简单实例

    利用navicat创建存储过程.触发器和使用游标的简单实例 标签: navicat存储过程触发器mysql游标 2013-08-03 21:34 15516人阅读 评论(1) 收藏 举报  分类: 数 ...

  5. 【转】Android Https服务器端和客户端简单实例

    转载地址:http://blog.csdn.net/gf771115/article/details/7827233 AndroidHttps服务器端和客户端简单实例 工具介绍 Eclipse3.7 ...

  6. Centos7的安装、Docker1.12.3的安装,以及Docker Swarm集群的简单实例

    目录 [TOC] 1.环境准备 ​ 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...

  7. vue路由的简单实例

    vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...

  8. Flume概述和简单实例

    Flume概述 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方( ...

  9. jsoup解析HTML及简单实例

    jsoup 中文参考文献    http://www.open-open.com/jsoup/ 本文将利用jsoup,简单实现网络抓取的功能,并给出一个小实例,该实例效果为:获取作者本人在博客园写的所 ...

随机推荐

  1. Android启动过程深入解析【转】

    转自:http://www.open-open.com/lib/view/open1403250347934.html 当按下Android设备电源键时究竟发生了什么? Android的启动过程是怎么 ...

  2. [Oracle] 临时将Physical Standby激活

    Oracle 10g/11g下如何将物理Standby库临时激活用于测试 在实际运营环境中, 我们经常碰到类似这样的需求: 譬如想不影响现网业务评估DB补丁在现网环境中运行的时间, 或者是想在做DB切 ...

  3. maven更换阿里云仓库

    本来不想写,网上到处都是,不过好多到我这不行,自己记录下,省的到处找 D:\apache-maven-3.6.1\conf目录下setting.xml文件(这是我的解压的位置) <mirrors ...

  4. 给定n个数字,问能否使这些数字相加得到h【折半查找/DFS】

    A Math game Time Limit: 2000/1000MS (Java/Others) Memory Limit: 256000/128000KB (Java/Others) Submit ...

  5. 2018年东北农业大学春季校赛 K wyh的数列【数论/斐波那契数列大数取模/循环节】

    链接:https://www.nowcoder.com/acm/contest/93/K来源:牛客网 题目描述 wyh学长特别喜欢斐波那契数列,F(0)=0,F(1)=1,F(n)=F(n-1)+F( ...

  6. HDU 2036 改革春风吹满地【计算几何/叉乘求多边形面积】

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  7. WEB接口测试之Jmeter接口测试自动化 (一)(初次接触)

    软件测试自动化从不同的测试阶段分类,可从下层到上层依次分为单元测试-->接口测试-->界面自动化测试. 单元测试一般有开发人员自行完成,而界面自动化测试合适的测试条件又很难达到,测试人员在 ...

  8. codevs——2841 愤怒的LJF(背包)

    样例有误!  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description LJF发现ZPC的积分比他高,他很愤怒. 他挤出T ...

  9. 2016北京集训测试赛(十六)Problem A: 任务安排

    Solution 这道题告诉我们, 不能看着数据范围来推测正解的时间复杂度. 事实证明, 只要常数足够小, \(5 \times 10^6\)也是可以跑\(O(n \log n)\)算法的!!! 这道 ...

  10. BZOJ 4011 HNOI2015 落忆枫音

    AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=4011 题目很长,写得也很有诗意与浪漫色彩,让我们不禁感叹出题人是一个多么英俊潇洒的人. 所 ...