icultivator 2013-11-14 13:21:48 25110次浏览 3条评论 12 0 0

原文:http://www.icultivator.com/p/3804.html

PJAX效果

通过url可以跟踪ajax的动态加载内容。这种技术尤其在two step view布局的视图中有很大的好处。无刷新加载页面,意味着响应速度和用户体验得到了极大的提升,在静态脚本和通用模块比较多的情况下,最大程度上节省了重用部分的开销。应用例子可以参考现在的google+、facebook和新版微博,同样是基于html5的pushState实现。google 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
  2. 基于jQ的pjax插件(github上的开源项目) https://github.com/defunkt/jquery-pjax
  3. PHP项目代码(方便分享,本文使用yii框架演示,实际开发中大同小异)

一.前端实现

使用实在简单,而且jquery-pjax这个插件封装得很好,绝对可以按照你的喜好来定制(例如复制g plus的效果),下面是一个整合以上步骤的基本html示例代码:

<?php
<a href="http://www.icultivator.com/p/tag/yii-2" title="查看 Yii 中的全部文章" target="_blank" class="tag_link" style="border: 0px; font-weight: inherit; line-height: inherit; font-family: inherit; color: rgb(0, 105, 214);">Yii</a>::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/jquery-pjax/jquery.pjax.js');//具体以你存放pjax的实际位置为准
?>
<div id="nav">
    <a href="<?php echo Yii::app()->createUrl('article/index');?>">article</a>
</div>
<div id="main">替换的内容</div>
    <script type="text/javascript">
       $(document).ready(function(){
            $("#main").pjax("a");
       });
    </script>
</div>

最终的目的,就是点击a标签时,通过ajax返回的结果将id为main的div内的文字替换为相应的地址内容,url自动更新,同时页面不会重新载入。下面开始实现后端要处理的内容

二.PHP端的实现

php端需要处理的任务主要是两件:1.实现layout视图布局 2.判断pjax过来的请求

Yii框架中的实现:

在控制器中对action做如下处理(以Article的index为例):

public function actionIndex() {
    
        $this->layout = '//layouts/column1';
        $dataProvider = new CActiveDataProvider('Article', array(
            'criteria' => array('order' => 'create_time DESC')
        ));
    
        if (array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']) {
            $this->renderPartial('index', array(
                  'dataProvider' => $dataProvider,
            ));
        } else {
            $this->render('index', array(
                'dataProvider' => $dataProvider,
            ));
        }
}

效果演示图:

pjax1

点击article链接或者文章链接后都会出现如下效果页面:

pjax-2

jquery-pjax使用中需要注意的事项:

1.返回的模版内容不能为纯文本,需要用html标签包裹

2.插件的使用方法,详情参考github的项目说明,更新后使用方法或有不同

3.对于不支持pushstate的低版本浏览器,pjax插件会自动判断并使用传统的页面加载模式

4.当一个页面的pjax请求时间超过设定时间时,会使用刷新来加载,需要调整插件内的相关参数

注:本文转自 http://www.icultivator.com/p/3804.html

  • 评论于 2014-10-04 20:00 举报

    很好。yii2已整好。 yiichina 已实现。

    2 条回复
    评论于 2014-10-30 10:04 回复

    yii2 还需要在控制器中写这个吗?array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX']

    评论于 2015-01-25 16:32 回复

    yii2的在哪,怎么弄

  • 评论于 2015-07-29 12:21 举报

    分页无刷新加载看似提高了用户体验,其实不然
    1、url地址不变,导致seo弱化;
    2、url地址不变,分页,或者筛选属性之后,无法定位具体筛选的结果页面;

    3 条回复
    评论于 2015-08-18 11:08 回复

    url地址变了,页面没刷新,页面加载了相应的内容。所以没有你说的这些问题。

    评论于 2016-10-31 18:51 回复

    你说的没错,但你说的是ajax,pjax就是为解决你的问题而生的。。。

    评论于 2016-11-25 20:48 回复

    haha,查下资料在评论不迟....

  • 评论于 2015-08-03 09:26 举报

    效果图看不到啊 自己试了下 没区别啊

您需要登录后才可以评论。登录 | 立即注册