Utilisez pjax intégré à Yii (pushstate+ajax) pour charger la page sans actualiser

Cet article présente Yii pour intégrer pjax (pushstate+ajax) pour obtenir un chargement de pages sans actualisation. Apprenons ensemble

Qu'est-ce que Pjax ?

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

L'historique des objets de la nomenclature a été amélioré, principalement pour les opérations sur la pile d'historique. Dans le passé, il n'y avait que remplacer, aller et. etc. Sautera et actualisera la page entière. Il existe maintenant des méthodes pushState, replaceState et d'autres qui exploitent simplement la pile d'historique. Elles modifient simplement le contenu de la pile d'historique et n'ont aucun effet secondaire (la page ne saute pas et ne s'actualise pas).

Effet PJAX

Le contenu chargé dynamiquement d'ajax peut être suivi via l'URL. Cette technique est particulièrement intéressante dans les vues comportant des dispositions de vue en deux étapes. Le chargement de la page sans actualisation signifie que la vitesse de réponse et l'expérience utilisateur ont été considérablement améliorées. Lorsqu'il existe de nombreux scripts statiques et modules communs, le coût de réutilisation est considérablement réduit. Les exemples d'application peuvent faire référence à Google+, Facebook et à la nouvelle version actuelle de Weibo, qui sont également implémentés sur la base de HTML5 pushState. Les performances de Google Plus sont les plus évidentes. Cliquez sur l'adresse de la barre de navigation, la flèche se déplace avec la cible et la page chargée apparaît en même temps. L'effet est très éblouissant.

URL sale et URL propre

Avant l'avènement de pjax, afin d'obtenir un chargement sans actualisation de la page et de la suivre via l'URL, le navigateur avait besoin pour prendre en charge la propriété window.location.hash. Le contenu qui doit être chargé est déterminé en jugeant l'adresse enregistrée après l'ancre url#. La méthode de construction spécifique consiste à écrire une fonction de surveillance des changements de hachage, et lorsque le changement de hachage est déclenché, le contenu à charger est jugé. Son inconvénient est que les navigateurs de version inférieure tels que ie6 ne prennent pas en charge le hachage et qu'une iframe supplémentaire doit être créée pour enregistrer les URL historiques afin d'effectuer des avancées et des retours en arrière. Le plus gros problème est que le contenu généré après # ne sera pas indexé par les moteurs de recherche. Google a déjà proposé une solution, préconisant l'utilisation de #! pour guider l'adresse vers une adresse de requête de ?escape_fragment=url. , Tout le monde sur Renren, Sina Weibo et le Douban fermé ont vu que ce hash bang a été ou est utilisé. passer#! Pour obtenir une URL chargée sans actualisation, car la méthode générale n'est pas facile à inclure par les moteurs de recherche (tels que Baidu national), elle est appelée URL sale. Relativement parlant, pjax peut utiliser une URL propre pour obtenir le même effet, et c'est le cas. bien compatible avec divers Ce navigateur est la méthode la plus appropriée maintenant

Utiliser PHP+jQuery pour implémenter PJAX

Il n'est pas nécessaire d'écrire un plug-in javascript basé sur pushState à partir de zéro, car jQuery a déjà un projet. Il est open source et facile à mettre en œuvre. Actuellement, je l'ai introduit dans le projet en cours de développement, et il est très compatible avec celui d'origine. Sans parler de la promotion de la nouvelle version de Weibo. J'espère que le public pourra voir à quoi je ressemble après. en l'utilisant, et vous le verrez également après l'avoir utilisé. Cela ressemble à ceci

Préparation avant de démarrer :

1. Bibliothèque jQuery

2. sur jQ (projet open source sur github) https://github. com/defunkt/jquery-pjax

3. Code du projet PHP (pour un partage facile, cet article utilise le framework yii pour la démonstration, et le réel le développement est similaire)

1. Implémentation frontale

Il est vraiment facile à utiliser et le plug-in jquery-pjax est bien emballé. être personnalisé selon vos préférences (comme copier l'effet de g plus Voici un exemple de code HTML de base qui intègre les étapes ci-dessus :

<?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>

Le but ultime est de remplacer le texte de p par l'identifiant de main par le contenu de l'adresse correspondant via le résultat renvoyé par ajax en cliquant sur la balise a, l'url est mise à jour automatiquement et la page ne sera pas rechargée. Commençons par implémenter le contenu à traiter par le backend

2. Implémentation du côté PHP

Les tâches qui doivent être traitées côté PHP sont principalement 2 : 1. Implémenter la mise en page de la vue 2 . Déterminer la demande de pjax

Implémentation dans le framework Yii :

Effectuer le traitement d'action suivant dans le contrôleur (prendre l'index de l'article comme exemple). ) :

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

Photo de démonstration d'effet :

Après avoir cliqué sur le lien de l'article ou le lien de l'article , la page d'effet suivante apparaîtra :

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

Choses à noter lors de l'utilisation de jquery-pjax :

1 Le contenu du modèle renvoyé ne peut pas être du texte brut. et doit être enveloppé avec des balises html

2 Pour savoir comment utiliser le plug-in, veuillez vous référer à la description du projet sur github pour plus de détails. La méthode d'utilisation peut être différente après la mise à jour

3. Pour les navigateurs de version inférieure qui ne prennent pas en charge pushstate, le plug-in pjax déterminera et utilisera automatiquement le mode de chargement de page traditionnel

Lorsque le temps de requête pjax d'une page dépasse le temps défini, il sera chargé à l'aide de l'actualisation et les paramètres pertinents dans le plug-in doivent être ajustés

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utilisé à l'avenir. Utile à tout le monde.

Articles connexes :

Jquery et PHP combinés pour implémenter l'interrogation longue AJAX

Code à barres de progression JS ajax lors du chargement

Compréhension préliminaire de JavaScript, Ajax, jQuery et comparaison de la relation entre les trois

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!