Codeigniter整合PJAX(pushstate+ajax)实现无刷新页面
2012-10-13 22:48
736 查看
PJAX效果
通过url可以跟踪ajax的动态加载内容。这种效果尤其在two step view布局的视图中有很大的好处。无刷新加载页面,意味着响应速度和用户体验得到了极大的提升,在静态脚本和通用模块比较多的情况下,最大程度上节省了重用部分的开销。应用例子可以参考现在的g
plus、facebook和新版微博,同样是基于html5的pushState实现。g plus的表现最为明显,点击导航栏地址,箭头随目标移动,同时加载的页面淡入,效果很炫。
使用CI+jQuery实现PJAX
不需要从头编写基于pushState的javascript插件,因为jQuery已有项目把它开源出来
开始前的准备:
1. jQuery librayhttp://code.jquery.com/jquery-1.8.2.min.js
2. 基于jQ的pjax插件(github上的项目) https://github.com/defunkt/jquery-pjax 3. PHP项目代码(本文使用codeigniter,开发中大同小异)
实际开发中包括前端和后端代码,关于前端插件的使用方法可参考github上的说明
php端需要处理的任务主要是两件:1.实现layout视图布局 2.判断pjax过来的请求
layout使每个视图的输出都是在一个公用模版之上。
第一步是实现CI中的layout。在application/libraries文件夹中新建文件Layout.php, 加入如下代码:
第二步是构建自定义的控制器超类,通过判断请求是否来自pjax,来决定是否启用layout进行输出. 在application/core下创建MY_Controller:
现在创建view下的模版文件和相关的controller来进行测试
demo 的 welcome controller.php
最后在模版文件中输出内容, 详细的view文件可查看demo
打开支持html5的浏览器并观察网络请求,发现点击页面上的a标签会引起一个ajax请求,url跳转,而页面并没有重新载入,而且前进后退功能一切正常!
------------------------------------------------------------------
使用jquery-pjax插件需要注意的地方:
1 .返回的模版内容不能为纯文本,需要用html标签包裹
2.插件的使用方法,详情参考github的项目说明,可能因为版本问题和demo有所出入
3.对于不支持pushstate的低版本浏览器,pjax会自动判断或使用传统的页面加载模式
4.当一个页面的pjax请求时间过长也会导致插件使用刷新加载,这时需要设定插件内的超时时间
demo地址在ci论坛原帖
http://codeigniter.org.cn/forums/thread-14433-1-1.html
通过url可以跟踪ajax的动态加载内容。这种效果尤其在two step view布局的视图中有很大的好处。无刷新加载页面,意味着响应速度和用户体验得到了极大的提升,在静态脚本和通用模块比较多的情况下,最大程度上节省了重用部分的开销。应用例子可以参考现在的g
plus、facebook和新版微博,同样是基于html5的pushState实现。g plus的表现最为明显,点击导航栏地址,箭头随目标移动,同时加载的页面淡入,效果很炫。
使用CI+jQuery实现PJAX
不需要从头编写基于pushState的javascript插件,因为jQuery已有项目把它开源出来
开始前的准备:
1. jQuery librayhttp://code.jquery.com/jquery-1.8.2.min.js
2. 基于jQ的pjax插件(github上的项目) https://github.com/defunkt/jquery-pjax 3. PHP项目代码(本文使用codeigniter,开发中大同小异)
实际开发中包括前端和后端代码,关于前端插件的使用方法可参考github上的说明
php端需要处理的任务主要是两件:1.实现layout视图布局 2.判断pjax过来的请求
layout使每个视图的输出都是在一个公用模版之上。
第一步是实现CI中的layout。在application/libraries文件夹中新建文件Layout.php, 加入如下代码:
<?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 */
第二步是构建自定义的控制器超类,通过判断请求是否来自pjax,来决定是否启用layout进行输出. 在application/core下创建MY_Controller:
<?php /* * * -------------------------------------------------------------------- * 控制器超类,加入pjax请求判断 * -------------------------------------------------------------------- * * @author ekin.cen <weibo.com/2839892994> * */ class MY_Controller extends CI_Controller{ protected $_layout='layout_default'; public function __construct(){ parent::__construct(); $this->_initialize(); } protected function _initialize(){ $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'); //set template $this->layout->set_layout($this->_layout); } } /* End of file */
现在创建view下的模版文件和相关的controller来进行测试
demo 的 welcome controller.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class Welcome extends MY_Controller { /** * Index Page for this controller. * * Maps to the following URL * http://example.com/index.php/welcome * - or - * http://example.com/index.php/welcome/index * - or - * Since this controller is set as the default controller in * config/routes.php, it's displayed at http://example.com/ * * So any other public methods not prefixed with an underscore will * map to /index.php/welcome/<method_name> * @see http://codeigniter.com/user_guide/general/urls.html */ public function index() { $this->layout->view('index'); } public function test1(){ $this->layout->view('test1'); } public function test2(){ $this->layout->view('test2'); } } /* End of file welcome.php */
最后在模版文件中输出内容, 详细的view文件可查看demo
打开支持html5的浏览器并观察网络请求,发现点击页面上的a标签会引起一个ajax请求,url跳转,而页面并没有重新载入,而且前进后退功能一切正常!
------------------------------------------------------------------
使用jquery-pjax插件需要注意的地方:
1 .返回的模版内容不能为纯文本,需要用html标签包裹
2.插件的使用方法,详情参考github的项目说明,可能因为版本问题和demo有所出入
3.对于不支持pushstate的低版本浏览器,pjax会自动判断或使用传统的页面加载模式
4.当一个页面的pjax请求时间过长也会导致插件使用刷新加载,这时需要设定插件内的超时时间
demo地址在ci论坛原帖
http://codeigniter.org.cn/forums/thread-14433-1-1.html
相关文章推荐
- 使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面
- pjax:ajax和pushState结合的js库——实现网站无刷新加载页面
- 使用Ajax和history.pushState()实现无刷新改变页面内容和地址栏Url
- 使用Ajax和history.pushState()实现无刷新改变页面内容和地址栏Url
- window.history.pushState与ajax实现无刷新更新页面url
- PushState+Ajax 完美实现无刷新
- pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
- 8. H5 pushState/popstate + ajax开发无刷新页面
- Ajax异步刷新地址栏url改变(利用Html5 history.pushState实现)
- pushState、replaceState、onpopstate 实现Ajax页面的前进后退刷新
- PushState+Ajax 完美实现无刷新
- PushState+Ajax实现简单的单页面应用SPA
- jQuery实现AJAX定时刷新局部页面
- 使用pjax_rails实现局部页面刷新
- 使用ajax和history.pushState无刷新改变页面URL
- ajaxpro.dll 控件实现异步刷新页面
- 利用ajax实现页面的局部刷新
- php+JQuery+Ajax简单实现页面异步刷新
- MVC 页面实现ajax刷新联动下拉列表