Use Yii Consolidated Pjax (PUSHSTATE+AJAX) to implement no refresh loading page _ajax related

What's Pjax?

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

BOM object history was enhanced by a wave, mainly on the history stack operation, previously only replace, go and so on, will jump and refresh the entire page, now has pushstate, replacestate, and so simple operation of the historical stack of methods, Simply modify the contents of the history stack, no side effects (page will not jump refresh)

Pjax effect

The dynamic load content of Ajax can be tracked through URLs. This technique is especially useful in the view of the two Step view layout. No refresh load page, which means that the response speed and user experience has been greatly improved, in the case of static scripts and common modules in many cases, the maximum amount of savings in the reuse part of the cost. Application examples can refer to the current Google +, Facebook, and new microblogging, also based on the HTML5 pushstate implementation. Google Plus's performance is most obvious, click the navigation bar address, the arrow moved with the target, while the loaded pages fade in, the effect is very cool.

Dirty url and Clean URL

Before Pjax appears, to implement a page without refreshing loading and tracking through the URL, you need the browser to support the Window.location.hash property. By judging the address of the url# anchor to determine the content to be loaded, the concrete construction method is to write a hashchange monitoring function, when the trigger to the hash changes will be judged loading content. The disadvantage is that for a lower version of the browser such as IE6 does not support hash, you need to build an IFRAME to record the history URL for forward and backward. The biggest problem is that the content generated after the # will not be indexed by the search engine, Google has provided a solution before, advocating the use of #! to guide the address to a ESCAPE_FRAGMENT=URL request address, I am on Twitter, Facebook, everyone, Sina Weibo and the already closed watercress said they had seen or were using the hash bang. Through #! To implement the URL without refreshing loading, because the general method is not easy to be indexed by search engines (such as domestic Baidu), called it dirty URL, relatively, pjax can use clean URL to get the same effect, and can be well compatible with various browsers, is now the most suitable method

Using Php+jquery to implement Pjax

There is no need to write a pushstate JavaScript plugin from scratch because jquery has a project to open it up and it's easy to implement it. At present, I have been in the development of the project introduced, and very good in the original based on the compatibility, not to mention the new version of micro-blog promotion, I hope to let the audience see, I use it after the appearance, you use it will be this way

Pre-start Preparation:

1. JQuery Libray

2. Pjax plugin based on JQ (open source project on GitHub) Https://github.com/defunkt/jquery-pjax

3. PHP Project code (easy to share, this article uses the YII framework demo, the actual development is similar)

A. Front-End implementation

It's easy to use, and Jquery-pjax this plugin is well packaged and can be tailored to your liking (for example, copy G Plus), and here's a basic HTML sample code that consolidates the above steps:

<?php
Yii::app ()->clientscript->registercorescript (' jquery ');
Yii::app ()->clientscript->registerscriptfile (Yii::app ()->baseurl. "/js/jquery-pjax/jquery.pjax.js")//specific to the actual location of your storage Pjax
?>
<div id= "nav" >
  <a href= " PHP echo Yii::app ()->createurl (' Article/index ');? > ">article</a>
</div>
<div id=" main "> Replacement content </div>
<script type=" text /javascript ">
  $ (document). Ready (function () {
    $ (" #main "). Pjax (" a ");
  });
</script>

The ultimate goal is to click on the a tag, the result of the return of Ajax will be the main ID in the div text replaced with the corresponding address content, the URL is automatically updated, and the page will not reload. Here's what you want to do with the backend

Two. PHP End of the implementation

PHP end needs to deal with the main task is two: 1. Implement layout view layout 2. Judge Pjax's request.

Implementation in the YII framework:

The action is treated as follows in the controller (take article's index as an example):

Public Function Actionindex () {
  $this->layout = '//layouts/column1 ';
  $dataProvider = new Cactivedataprovider (' Article ', Array ('
    criteria ' => array (' Order ' => ' create_time DESC ') c4/>));
  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,
    )
  }

Effect Demo Chart:

Clicking on the article link or post link will show the following effect page:

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

Jquery-pjax to be aware of in use:

1. The returned template content cannot be plain text and needs to be wrapped with HTML tags

2. The use of Plug-ins, details refer to the GitHub project description, updated after the use of methods or different

3. For browsers that do not support pushstate, the Pjax plug-in automatically judges and uses the traditional page load mode

4. When a page's Pjax request time exceeds the set time, will use the refresh to load, needs to adjust the correlation parameter inside the plug-in

The contents of this article are all finished, I hope to learn Pjax (Pushstate+ajax) help.