yii2 html a ajax,Yii整合pjax（pushstate+ajax）实现无刷新加载页面（图文）

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已有项目把它开源出来，而且很轻易便能实现。目前我已经在开发中的项目里引入，而且很好地在原有的基础上兼容，何况新版微博的推广，我希望让观众看到，我用完之后是这个样子，你们用完之后也会是这个样子

开始前的准备：

jQuery libray

PHP项目代码(方便分享，本文使用yii框架演示，实际开发中大同小异)

一.前端实现

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

Yii::app()->clientScript->registerCoreScript('jquery');

Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/jquery-pjax/jquery.pjax.js');//具体以你存放以你存放pjax的实际位置为准

?>

article

替换的内容

$("#main").pjax("a");

});