首页 / AJAX / 使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3830字，纯文字阅读大概需要6分钟。

内容图文

本篇文章给大家介绍Yii整合pjax（pushstate+ajax）实现无刷新加载页面，一起学习吧

Pjax是啥？

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的实际位置为准
?>
<p id="nav">
  <a href="<?php echo Yii::app()->createUrl('article/index');?>">article</a>
</p>
<p id="main">替换的内容</p>
<script type="text/javascript">
  $(document).ready(function(){
    $("#main").pjax("a");
  });
</script>

最终的目的，就是点击a标签时，通过ajax返回的结果将id为main的p内的文字替换为相应的地址内容，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,
    ));
  }
}

效果演示图：

使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面 - 文章图片

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

使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面 - 文章图片

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

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

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

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

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jquery与php结合实现AJAX长轮询

js ajax加载时的进度条代码

初步了解JavaScript，Ajax，jQuery，并比较三者关系

以上就是使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面全部内容，希望文章能够帮你解决使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/289557.html

来源：【匿名】