pjax简单实例
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简单实例的更多相关文章
- Hibernate(二)__简单实例入门
首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...
- 最新 Eclipse IDE下的Spring框架配置及简单实例
前段时间开始着手学习Spring框架,又是买书又是看视频找教程的,可是鲜有介绍如何配置Spring+Eclipse的方法,现在将我的成功经验分享给大家. 本文的一些源代码来源于码农教程:http:// ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- 利用navicat创建存储过程、触发器和使用游标的简单实例
利用navicat创建存储过程.触发器和使用游标的简单实例 标签: navicat存储过程触发器mysql游标 2013-08-03 21:34 15516人阅读 评论(1) 收藏 举报 分类: 数 ...
- 【转】Android Https服务器端和客户端简单实例
转载地址:http://blog.csdn.net/gf771115/article/details/7827233 AndroidHttps服务器端和客户端简单实例 工具介绍 Eclipse3.7 ...
- Centos7的安装、Docker1.12.3的安装，以及Docker Swarm集群的简单实例
目录 [TOC] 1.环境准备 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...
- vue路由的简单实例
vue2.0 和 vue1.0 路由的语法还是有点稍微的差别,下面介绍一下vue-router 2的简单实例: <!DOCTYPE html> <html lang="en ...
- Flume概述和简单实例
Flume概述 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方( ...
- jsoup解析HTML及简单实例
jsoup 中文参考文献 http://www.open-open.com/jsoup/ 本文将利用jsoup,简单实现网络抓取的功能,并给出一个小实例,该实例效果为:获取作者本人在博客园写的所 ...
随机推荐
- python画直线
#!/usr/bin/env python import matplotlib.pyplot as plt import numpy as np #beita = 1 #gama = 0.5 #x:f ...
- Springboot如何优雅的解决ajax+自定义headers的跨域请求
1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...
- 关于ProGuard的学习了解（从别处转来）
关于ProGuard的学习了解(从别处转来) [Android]jar包Proguard混淆方法 Proguard 使用详解 Proguard语法及常用proguard.cfg代码段 Proguard ...
- Windows 远程桌面文件传输的方法
实现电脑的远程连接以后,很多时候会需要进行主机间的文件传输,这个时候就可以用系统自带的远程连接里的磁盘映射来完成,详细如下: 远程桌面程序内置了映射磁盘的功能,通过这个功能可以实现远程登录服务器时自动 ...
- win8.1安装VMware Error:This product may not be installed on a comuputer that has Microsoft HyperV installed
之前用的win7,安装虚机没遇到这问题,换了win8.1后,再安装虚机,就会出现下面的错误.没办法,还是记录一下吧. Error:This product may not be installed o ...
- SQL Server数据库连接，Web.config的正确配置 [转]
http://database.51cto.com/art/201007/213289.htm 此文章主要介绍的是Web.config正确配置SQL Server数据库连接的实际擦步骤,在图5-6中, ...
- 【前端GUI】—— 前端设计稿切图通用性标准
前言:公司在前端组和视觉组交接设计稿切图的时候,总会因为视觉组同事们对前端的实现原理不清楚而出现各种问题,在用的时候还得再次返工,前端组同事们一致觉得应该出一份<设计稿切图通用性标准文件> ...
- 2017.2.28 activiti实战--第七章--Spring容器集成应用实例（五）普通表单
学习资料:<Activiti实战> 第七章 Spring容器集成应用实例(五)普通表单 第六章中介绍了动态表单.外置表单.这里讲解第三种表单:普通表单. 普通表单的特点: 把表单内容写在 ...
- linux中find的用法
找所在目录的文件用 find -name “file*” -print #注意不要用加文件路径,查找文件也好用双双引号括住: 也可以 find ./ -name “file*” -print
- JavDroider的作品展示
好久没有写博客了,很懊悔,尽管说实习和项目那边的任务有点多,可是我想每天抽出时间出来写一篇文章总结一下当天所习所得并不困难! 好了,今天以一篇个人作品介绍来又一次开启我的博客~ 实习单位的门户站点 一 ...