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. Scrapy笔记：使用代理ip

    scrapy框架使用代理ip的基本思路是修改请求对象中的meta['proxy']的值,将代理ip赋值给这个属性.遵循这个思路,只要是生成Request对象的地方都可以设置Request的值. dow ...

  2. 关于main函数的参数

    #include <stdio.h> int main(int argc, char const *argv[]) { int i; for ( i = 0; i < argc; i ...

  3. BZOJ——3412: [Usaco2009 Dec]Music Notes乐谱

    http://www.lydsy.com/JudgeOnline/problem.php?id=3412 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit:  ...

  4. ZOJ 1232 Adventure of Super Mario (Floyd + DP)

    题意:有a个村庄,编号为1到a,有b个城堡,编号为a+1到a+b.现在超级玛丽在a+b处,他的家在1处.每条路是双向的,两端地点的编号以及路的长度都已给出.路的长度和通过所需时间相等.他有一双鞋子,可 ...

  5. codevs 1450 xth 的旅行

     时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 毕业了,Xth很高兴,因为他要和他的 ra ...

  6. poj 3648 线段树成段更新

    线段树成段更新需要用到延迟标记(或者说懒惰标记),简单来说就是每次更新的时候不要更新到底,用延迟标记使得更新延迟到下次需要更新or询问到的时候.延迟标记的意思是:这个区间的左右儿子都需要被更新,但是当 ...

  7. win7安装mysql解压缩版

    http://blog.csdn.net/u013067166/article/details/49951577

  8. z pre-pass 相关问题的讨论

    z pre-pass 是指在渲染流程中,第一个pass先画一张深度buffer出来,得到需要绘制的最前面这层深度,用这个在接下来的pass中做深度剔出,这样在第二个pass中会省略很多绘制. 这项技术 ...

  9. ubuntu更改mysql的编码配置

    1.Ctrl+t打开终端 2.输入mysql -u root -p 命令,进入MySQL 输入 SHOW VARIABLES LIKE 'char%'; 查看MySQL编码,有两个不是utf8 3.在 ...

  10. 2014年辛星解读Javascript之DOM高速入门

    在Javascript的知识中,有一个所谓的DOM.即文档对象模型,我们能够通过它来訪问HTML文档的元素,当网页被载入的时候,浏览器会去创建DOM,有了这个DOM.我们能够使用Javascript去 ...