【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
PJAX效果
通过url可以跟踪ajax的动态加载内容。这种技术尤其在two step view布局的视图中有很大的好处。无刷新加载页面，意味着响应速度和用户体验得到了极大的提升，在静态脚本和通用模块比较多的情况下，最大程度上节省了重用部分的开销。应用例子可以参考现在的google+、facebook和新版微博，同样是基于html5的pushState实现。g plus的表现最为明显，点击导航栏地址，箭头随目标移动，同时加载的页面淡入，效果很炫。
Dirty url 和 Clean url
在pjax出现之前，要实现页面的无刷新加载并通过url可以追踪，需要浏览器支持window.location.hash属性。通过判断url#锚后记录的地址来决定需要加载的内容，具体的构建方法是写一个hashchange的监视函数，当触发到hash改变时便判断加载内容。它的不足在于，对于低版本的浏览器例如ie6不支持hash，需要另外构建一个iframe来记录历史url实现前进和后退。最大的问题，便是#后生成的内容不会被搜索引擎索引到，google之前提供了解决方案，提倡使用#!把地址引导到一个?escape_fragment=url的请求地址中，我在twitter、facebook、人人、新浪微博和已经关闭了的豆瓣说中都看见曾经或正在使用这种hash bang。通过#！来实现无刷新加载的url，由于一般的方法不容易被搜索引擎收录（例如国内百度），称其为dirty url，相对而言，pjax能够使用clean url得到同样效果，并能很好地兼容各种浏览器，是现在最为适合的方法
使用PHP+jQuery实现PJAX
不需要从头编写基于pushState的javascript插件，因为jQuery已有项目把它开源出来，而且很轻易便能实现。目前我已经在开发中的项目里引入，而且很好地在原有的基础上兼容，何况新版微博的推广，我希望让观众看到，我用完之后是这个样子，你们用完之后也会是这个样子
开始前的准备：
1. jQuery libray http://code.jquery.com/jquery-1.8.2.min.js
2. 基于jQ的pjax插件(github上的开源项目) https://github.com/defunkt/jquery-pjax
3. PHP项目代码（方便分享，本文使用codeigniter和yaf框架演示，实际开发中大同小异）
一 前端实现
最最最基本需要先引入jquery库，在页头中引入脚本地址 （sina的cdn）
<script src=”http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js”></script>根据第二条中的项目插件，加入jq的pjax插件地址
<script src=”BASEURL_TO_PJAX_PLUGIN”></script>接下来，我们来看看github上作者的说明，更直接，可以直接打开插件看代码。最简单的使用方法如下
$('#main').pjax('a')上述语句表示，点击dom中的任何a标签，将会发起pjax请求并将内容替换到id为main的页面元素内
使用实在简单，而且jquery-pjax这个插件封装得很好，绝对可以按照你的喜好来定制（例如复制g plus的效果），下面是一个整合以上步骤的基本html示例代码
<html>
<head>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-pjax.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#main").pjax("a");
});
</script>
<div id="nav">
<a href="/test1">test1</a><a href="/test2">test2</a>
</div>
<div id="main">替换的内容</div>
</body>
</html>最终的目的，就是点击地址为/test1和/test2的a标签时，通过ajax返回的结果将id为main的div内的文字替换为相应的地址内容，url自动更新，同时页面不会重新载入。下面开始实现后端要处理的内容
二.PHP端的实现
php端需要处理的任务主要是两件：1.实现layout视图布局 2.判断pjax过来的请求
layout使每个视图的输出都是在一个公用模版之上。
CI的实现：
写一个自定义的layout library文件：
<?php
/*
*
* --------------------------------------------------------------------
* 视图布局类
* --------------------------------------------------------------------
*
* @author ekin.cen <weibo.com/2839892994>
*
*/
class Layout{
public $obj;
public $disable_layout = FALSE;
protected $_layout;
protected $_layout_dir = 'layout';
protected $_template_dir = 'templates';
protected $_data = array();
public function __construct()
{
$this->obj = &get_instance();
}
public function set_layout($layout)
{
$this->_layout = $layout;
return $this;
}
public function set_layout_dir($dirname)
{
$this->_layout_dir = $dirname;
return $this;
}
public function set_template_dir($dirname)
{
$this->_template_dir = $dirname;
return $this;
}
public function view($view, $data = NULL, $return = FALSE)
{
$view = $this->_template_dir . DIRECTORY_SEPARATOR . $view;
$this->_layout = $this->_layout_dir . DIRECTORY_SEPARATOR . $this->_layout;
if ($this->_data)
{
$data = $data ? array_merge($this->_data, $data) : $this->_data;
}
if ($this->disable_layout)
{
echo $this->obj->load->view($view, $data, TRUE);
}
else
{
$data = array('TEMPLATE_CONTENT' => $this->obj->load->view($view, $data, TRUE));
$this->obj->load->view($this->_layout,$data,$return);
}
}
public function assign($key, $value = null)
{
$data = is_array($key) ? $key : array($key => $value);
$this->_data = array_merge($data, $this->_data);
return $this;
}
}
/* End of file */
将以上文件命名未Layout.php放在application/libraries文件夹中,并在autoload文件中加入：
$autoload['libraries'] = array('layout');调用时，在一般的controller中输出视图的方法
$this->load->view(TEMPLATE_PATH,$data);变成：
$this->layout->view(TEMPLATE_PATH,$data);以上Layout文件中视图模版的输出路径默认在 /view/templates/，layout模版对应的位置为/view/layout/ ，在/view/layout中新建一个模版文件(layout_test.php), 代码如下：
<html>
<head>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-pjax.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#main").pjax("a");
});
</script>
<div id="nav">
<a href="/test1">test1</a><a href="/test2">test2</a>
</div>
<div id="main"><?=$LAYOUT_CONTENT;?></div>
</body>
</html>
上面只是将html模版中要替换的内容变成了我们控制器需要输出的视图模版内容（$LAYOUT_CONTENT)。
到目前为止已经可以在CI中使用layout，剩下的就是在前端控制器中判断请求类型，如果存在$_SERVER['HTTP_X_PJAX']类型，就不输出layout，直接返回组件的渲染内容。
使用自定义的控制器，在application/core文件夹中新建文件 MY_Controller（默认的前缀根据配置定义）,添加如下代码：
<?php
/*
*
* @author ekin.cen<weibo.com/2839892994>
*
*/
class MY_Controller extends CI_Controller
{
//默认的layout模版
protected $_layout = 'layout_test';
public function __construct()
{
parent::__construct();
$this->_initialize();
}
protected function _initialize()
{
//如设置了autoload文件，则此步省略
$this->_set_layout();
// check if is pjax request
if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'])
{
$this->layout->disable_layout = true;
}
}
protected function _set_layout()
{
$this->load->library('layout');
$this->layout->set_layout($this->_layout);
}
}
/* End of file MY_Controller.php */到此为止，已经准备好并能测试效果了 ：)
编写两个测试控制器test1和test2, 通过layout方法输出视图
class Test1 extends MY_Controller{
public function index(){
$this->layout->view('test1');
}
}打开浏览器查看网络请求状态
上图是点击地址为“/test”的a标签后得到的pjax请求，说明整合成功
--------------------------------------
jquery-pjax使用中需要注意的事项：
1.返回的模版内容不能为纯文本，需要用html标签包裹
2.插件的使用方法，详情参考github的项目说明，更新后使用方法或有不同
3.对于不支持pushstate的低版本浏览器，pjax插件会自动判断并使用传统的页面加载模式
4.当一个页面的pjax请求时间超过设定时间时，会使用刷新来加载，需要调整插件内的相关参数
目前整理了适用于CI和yaf的demo，CI论坛的传送门地址包含下载 http://codeigniter.org.cn/forums/thread-14433-1-1.html
来源：oschina
链接：https://my.oschina.net/u/813763/blog/81263