Use Yii integrated pjax (pushstate+ajax) to load the page without refreshing

This article will introduce Yii to integrate pjax (pushstate ajax) to achieve non-refresh loading of pages. Let’s learn together

What is Pjax?

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

The BOM object history has been enhanced, mainly for operations on the history stack. In the past, only replace, go and the like would jump. Turn and refresh the entire page. Now there are pushState, replaceState and other methods that simply operate the history stack. They just modify the content in the history stack and have no side effects (the page will not jump and refresh)

PJAX Effect

The dynamically loaded content of ajax can be tracked through the url. This technique is particularly beneficial in views with two step view layouts. Loading the page without refreshing means that the response speed and user experience have been greatly improved. When there are many static scripts and common modules, the cost of reuse is saved to the greatest extent. Application examples can refer to current Google, Facebook and the new version of Weibo, which are also implemented based on HTML5 pushState. The performance of Google Plus is the most obvious. Click the navigation bar address, the arrow moves with the target, and the loaded page fades in at the same time. The effect is very dazzling.

Dirty url and Clean url

Before the advent of pjax, in order to load the page without refreshing and track it through the url, the browser needed to support window.location.hash Attributes. The content that needs to be loaded is determined by judging the address recorded after the url# anchor. The specific construction method is to write a hashchange monitoring function, and when the hash change is triggered, the content to be loaded is judged. Its disadvantage is that lower version browsers such as ie6 do not support hash, and an additional iframe needs to be built to record historical URLs to achieve forward and backward. The biggest problem is that the content generated after # will not be indexed by search engines. Google has provided a solution before, advocating the use of #! to guide the address to a request address of ?escape_fragment=url. I use twitter, facebook, Everyone on Renren, Sina Weibo and the closed Douban have seen that this kind of hash bang has been or is being used. pass#! To realize the url loaded without refreshing, because the general method is not easy to be included by search engines (such as domestic Baidu), it is called dirty url. Relatively speaking, pjax can use clean url to get the same effect, and is well compatible with various This browser is the most suitable method now

Use PHP jQuery to implement PJAX

There is no need to write a javascript plug-in based on pushState from scratch, because jQuery already has a project to implement it It is open source and can be easily implemented. At present, I have introduced it into the project under development, and it is very compatible with the original one. Not to mention the promotion of the new version of Weibo. I hope that the audience can see that this is what I look like after using it, and you will also see it after using it. It looks like this

Preparation before starting:

1. jQuery libray

2. jQ-based pjax plug-in (open source project on github) https://github. com/defunkt/jquery-pjax

3. PHP project code (for easy sharing, this article uses the yii framework for demonstration, and the actual development is similar)

1. Front-end implementation

It is really easy to use, and the jquery-pjax plug-in is well packaged. It can definitely be customized according to your preferences (such as copying the effect of g plus). The following is a basic html sample code that integrates the above steps:

<?php
Yii::app()->clientScript->registerCoreScript(&#39;jquery&#39;);
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . &#39;/js/jquery-pjax/jquery.pjax.js&#39;);//具体以你存放pjax的实际位置为准
?>
<p id="nav">
  <a href="<?php echo Yii::app()->createUrl(&#39;article/index&#39;);?>">article</a>
</p>
<p id="main">替换的内容</p>
<script type="text/javascript">
  $(document).ready(function(){
    $("#main").pjax("a");
  });
</script>

The ultimate goal is to replace the text in p with the id of main with the corresponding address content and url through the results returned by ajax when clicking the a tag. Updates automatically and the page does not reload. Let's start to implement the content to be processed by the backend

2. Implementation of the PHP side

The tasks that the PHP side needs to handle are mainly two: 1. Implement the layout view layout 2 .Judge the request coming from pjax

Implementation in Yii framework:

Do the following processing of action in the controller (take the index of Article as an example):

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,
    ));
  }
}

Effect demonstration picture:

After clicking the article link or article link, the following effect page will appear:

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

Things to note when using jquery-pjax:

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

2. Plug-in How to use, please refer to the project description on github for details. The usage may be different after updating.

3. For lower version browsers that do not support pushstate, the pjax plug-in will automatically determine and use the traditional page loading mode

4. When the pjax request time of a page exceeds the set time, it will be loaded using refresh, and the relevant parameters in the plug-in need to be adjusted.

The above is what I compiled for everyone. I hope it will be useful to everyone in the future. helpful.

Related articles:

Jquery and PHP combined to implement AJAX long polling

Js ajax progress bar code when loading

Initial understanding of JavaScript, Ajax, jQuery, and comparison of the relationship between the three

The above is the detailed content of Use Yii integrated pjax (pushstate+ajax) to load the page without refreshing. For more information, please follow other related articles on the PHP Chinese website!