使用Yii整合的pjax(pushstate+ajax)实现无刷新加载页面

Pjax是啥?

Pjax = history.pushState + Ajax
   = history.pushState + Async JS + XML(xhr?)

BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副作用(页面不会跳转刷新)

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
Yii::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>

最终的目的,就是点击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,
    ));
  }
}

效果演示图:

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

--------------------------------------

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

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

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

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

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

本文内容就全部叙述完了,希望对大家学习pjax(pushstate+ajax)有所帮助。

(0)

相关推荐

  • Yii2基于Ajax自动获取表单数据的方法

    本文实例讲述了Yii2基于Ajax自动获取表单数据的方法.分享给大家供大家参考,具体如下: 这里有两张表,表结构如下,locations表存放的省份和邮编等信息,两张表的model和curd均使用gii生成 yii2advanced.customers表 customer_id:int(11) customer_name:varchar(100) zip_code:varchar(20) city:varchar(100) province:varchar(100) yii2advanced.l

  • ajax翻页效果模仿yii框架自己写的

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>ajax分页</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> function loadXMLDoc($url) { var xmlhttp; if (window.XMLHt

  • Yii2表单事件之Ajax提交实现方法

    本文实例讲述了Yii2表单事件之Ajax提交实现方法.分享给大家供大家参考,具体如下: 前言 Yii2 现在使用 JS 都必须要注册代码了. 要实现 Ajax 提交,有两种方法.一是直接在 ActiveForm 调用 beforeSubmit 参数,但是个人认为这样没有很好的把 JS 和 HTML 分开,所以我们这篇文章主要介绍第二种方法 - 外部写 JS 方法. 表单部分 <?php $form = ActiveForm::begin([ 'id' => $model->formNam

  • Yii框架结合sphinx,Ajax实现搜索分页功能示例

    本文实例讲述了Yii框架结合sphinx,Ajax实现搜索分页功能的方法.分享给大家供大家参考,具体如下: 效果图: 控制器: <?php namespace backend\controllers; use Yii; use yii\web\Controller; use yii\data\Pagination; use SphinxClient; use yii\db\Query; use yii\widgets\LinkPager; use backend\models\Goods; cl

  • Yii+upload实现AJAX上传图片的方法

    本文实例讲述了Yii+upload实现AJAX上传图片的方法.分享给大家供大家参考,具体如下: 控制器代码: /** * get ajax uploaded files. */ public function actionGetAjax(){ $model=new Attachment();//加载附件模型 $tmpFile = CUploadedFile::getInstanceByName('image');//读取图像上传域,并使用系统上传组件上传 $Directroy = Yii::ap

  • yii2使用ajax返回json的实现方法

    本文实例讲述了yii2使用ajax返回json的实现方法.分享给大家供大家参考,具体如下: public function actionAjax() { if(isset(Yii::$app->request->post('test'))){ $test = "Ajax Worked!"; // do your query stuff here }else{ $test = "Ajax failed"; // do your query stuff he

  • Yii使用ajax验证显示错误messagebox的解决方法

    本文实例讲述了Yii使用ajax验证显示错误messagebox的解决方法.分享给大家供大家参考.具体方法如下: yii 自带了ajax 表单验证 这个可能有些朋友不知道了,但我今天在使用yii 自带的ajax 表单验证 时碰到一些问题,下面我来整理例子与大家参考一下. 在Yii中,可以利用ajax执行一个action,但是这个action有时候会有弹出错误讯息的需求,这时候的处理方式如下 基本思想 利用exception,比如: 复制代码 代码如下: throw new CHttpExcept

  • yii2 modal弹窗之ActiveForm ajax表单异步验证

    前面我们讲述了yii2中如何使用modal以及yii2 gridview列表内更新操作如何使用modal的问题,本以为modal要告一段落可以开始新的话题了,但是实际问题往往超乎想像,这不modal弹窗提交的表单说是怎么验证的问题又出来了,又出来了! 首先撇开modal不谈,我们就yii2 ActiveForm如何以Ajax的方式提交表单做一个简单的说明,这也是我们今天主题的重点,modal确实没啥好说了.后面若是有我再把话改回来. yii2中,ActiveForm默认做了客户端验证,但是表单的

  • yii2控制器Controller Ajax操作示例

    本文实例讲述了yii2控制器Controller Ajax操作的方法.分享给大家供大家参考,具体如下: public function actionSample() { if (Yii::$app->request->isAjax) { $data = Yii::$app->request->post(); $searchname= explode(":", $data['searchname']); $searchby= explode(":&quo

  • Yii2.0 模态弹出框+ajax提交表单

    如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: <?php echo Html::a('添加请假单', ['create'], ['class' => 'btn btn-success','data-toggle'=>'modal','data-target'=>'#ajax']) ?> 在index视图添加如下代码 来显示模态弹出框: <div class=&q

  • Yii2实现ajax上传图片插件用法

    本文实例讲述了Yii2实现ajax上传图片插件用法.分享给大家供大家参考,具体如下: 这里需要先下载 mdmsoft/yii2-upload-file.插件. 代码如下: public function actionCreate() { $model = new DynamicModel([ 'nama', 'file_id' ]); // behavior untuk upload file $model->attachBehavior('upload', [ 'class' => 'mdm

  • Yii基于CActiveForm的Ajax数据验证用法示例

    本文实例讲述了Yii基于CActiveForm的Ajax数据验证用法.分享给大家供大家参考,具体如下: 1. 视图定义form表单开启ajax验证 $form = $this->beginWidget('CActiveForm', array( 'id'=>'zdzone-form', 'enableAjaxValidation'=>true,//开启ajax验证 'enableClientValidation'=>true,//开启客户端验证,生成js 'action'=>

随机推荐