文档章节

php整合pjax(pushstate+ajax)实现无刷新页面

_EKC
 _EKC
发布于 2012/10/01 17:46
字数 1834
阅读 6381
收藏 22
点赞 2
评论 2

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

© 著作权归作者所有

共有 人打赏支持
_EKC
粉丝 21
博文 16
码字总数 9032
作品 0
广州
程序员
加载中

评论(2)

小薇
小薇
问一下,博主QQ多少啊?642742669,我的~
我在加入pjax中遇到问题:
1.jquery包
2.pjax包
3.页面调用pjax
4.后台处理,问一下,我的博客是自己采用php写的,没有采用模版,这个后台该怎么写啊?我的页面,50vip.com
黄华仔
黄华仔
clear url与dirty url概念算是有所了解了!
Pjax是什么以及为什么推荐大家用

什么是pjax? 现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都闪一...

Sub
2013/04/17
0
33
关于pjax方式无刷新加载网页?

pjax使用不成功啊,已经成功发出了pjax请求了,但是瞬间请求就abort,然后又采用刷新的方式加载,什么问题? 我的做法: 1.加入jquery、pjax的js包 2.前台对a标签作pjax处理,主要是a标签选择...

小薇
2013/04/23
3.5K
5
Pjax的介绍及妙用

什么是pjax?   现在很多网站( facebook, twitter)都支持这样的一种浏览方式, 当你点击一个站内的链接的时候, 不是做页面跳转, 而是只是站内页面刷新。 这样的用户体验, 比起整个页面都...

Corwien
2016/03/22
230
0
jquery-pjax遇到的坑

最近做的东西的前端部分,想模仿github之类的网站使用pjax技术,实现局部刷新并且更改浏览器地址。 于是我在github上搜索了一些个开源的pajx技术的实现,发现有个叫jquery-pjax的还不错,sta...

扬州炒饭
2016/04/07
1K
0
jQuery-pjax

为什么要用pjax? pjax有好几个好处: 用户体验提升。 页面跳转的时候人眼需要对整个页面作重新识别, 刷新部分页面的时候, 只需要重新识别其中一块区域。国外某社交平台也使用类似于pjax技术...

匿名
2016/05/23
751
0
yii2 pjax使用

http://blog.neattutorials.com/yii2-pjax-tutorial/ pjax刷新报错,修改php.ini alwayspopulaterawpost_data = -1...

Kilar
2015/12/23
74
0
请教一个技术实现思路

请教一个技术实现思路,或者有现成的技术最好 想法是这样的: 我有一个A网页,想要卖一种产品www.a.com/1.php,有购买按钮,但是产品实际在不同URL的B页 www.b.com/buy.php,是否可以在www.a...

静水流深1984
2014/04/08
562
10
SEO和体验并重的超链接设计

如果你要了解PJAX,请看: AJAX + window.history.pushState/onpopstate (需要HTML5支持) https://github.com/defunkt/jquery-pjax 我下面说的是锚点链接(书签链接)这个方案: AJAX + window.l...

eechen
2016/11/09
108
1
jQuery.Pjax

pushState + ajax = pjax jQuery的Pjax插件,Pjax即pushState + Ajax,是实现无刷新ajax加载并解决浏览器前进和后退问题的一个开源实现。 pjax 示例代码: $.pjax({url: '/authors',containe...

匿名
2011/07/12
22.6K
1
Pjax是什么?

什么是Pjax? Pjax = ajax + history.pushState Pjax就是Ajax,不同点只有一个:就是会利用html5改变url地址而无需刷新页面,而Ajax只会利用url hash地址来改变url:在url后面加#或者#! jque...

爬墙
2016/09/17
58
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
9分钟前
0
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
10分钟前
0
0
vue-router懒加载

1. vue-router懒加载定义 当路由被访问的时候才加载对应组件 2. vue-router懒加载作用 当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。 ###3. vue-router懒加载实...

不负好时光
17分钟前
0
0
庆祝法国队夺冠:用Python放一场烟花秀

天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花庆祝昨晚法国队夺冠,工作之余也可以随时让程序为自己放一场烟花秀。 这个有趣的小项目并不...

猫咪编程
19分钟前
0
0
SpringBoot | 第七章:过滤器、监听器、拦截器

前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息、统计在线人数、在线用户数、过滤敏高词汇、访问权限控制(URL级别)等业务需求。这些对于业务来说一般上是无关的,业务方是无需...

oKong
33分钟前
5
0
存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储

存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储 存储结构分四类:顺序存储、链接存储、索引存储 和 散列存储。 顺序结构和链接结构适用在内存结构中。 顺序表每个单元都是按物理...

DannyCoder
43分钟前
1
0
Firefox 61已经为Ubuntu 提供支持

最新和最好的Mozilla Firefox 61 “Quantum”网络浏览器已经为Ubuntu Linux操作系统的用户提供了支持,现在可以通过官方软件库进行更新。 Mozilla于2018年6月26日发布了Firefox 61版本,该版...

六库科技
今天
0
0
Win10升级后执行系统封装(Sysprep)报错

开始封装 一年多以前开始给公司封装Win10系统,便于统一给公司电脑初始化携带各种软件的系统,致力于装完既可以开发的状态。那时候最新的版本是Win10 1703版本,自然就以他为母盘,然后结合V...

lyunweb
今天
40
0
php 性能优化

#什么情况下会遇到性能问题 PHP 语法使用的不恰当

to_be_better
今天
0
0
Jenkins 构建触发器操作详解

前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行。 一、定时构建语法 * * * * * (五颗星,中间用空格隔...

覃光林
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部