Verwenden Sie das in Yii integrierte pjax (pushstate+ajax), um die Seite ohne Aktualisierung zu laden

In diesem Artikel wird Yii vorgestellt, um Pjax (Pushstate + Ajax) zu integrieren, um das Laden von Seiten ohne Aktualisierung zu erreichen.

Was ist Pjax?

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

Der Stücklistenobjektverlauf wurde verbessert, hauptsächlich für Vorgänge im Verlaufsstapel. In der Vergangenheit wurden nur Ersetzen, Loslassen und dergleichen ausgeführt . Jetzt gibt es pushState, replaceState und andere Methoden, die nur den Inhalt im Verlaufsstapel ändern und keine Nebenwirkungen haben (die Seite wird nicht aktualisiert)

PJAX-Effekt

Der dynamisch geladene Inhalt von Ajax kann über die URL verfolgt werden. Diese Technik ist besonders vorteilhaft in Ansichten mit zweistufigen Ansichtslayouts. Das Laden der Seite ohne Aktualisierung bedeutet, dass die Reaktionsgeschwindigkeit und das Benutzererlebnis erheblich verbessert wurden. Wenn viele statische Skripte und gemeinsame Module vorhanden sind, werden die Kosten für die Wiederverwendung am meisten eingespart. Anwendungsbeispiele können sich auf das aktuelle Google+, Facebook und die neue Version von Weibo beziehen, die ebenfalls auf Basis von HTML5 pushState implementiert sind. Die Leistung von Google Plus ist am offensichtlichsten. Klicken Sie auf die Adresse der Navigationsleiste, der Pfeil bewegt sich mit dem Ziel und die geladene Seite wird gleichzeitig eingeblendet.

Dirty URL und Clean URL

Vor dem Aufkommen von pjax musste der Browser dies unterstützen, um ein Laden ohne Seitenaktualisierung zu erreichen und über die URL nachverfolgbar zu sein window.location.hash-Eigenschaft. Der zu ladende Inhalt wird durch Beurteilung der nach dem URL-Anker aufgezeichneten Adresse bestimmt. Die spezifische Konstruktionsmethode besteht darin, eine Hash-Änderungsüberwachungsfunktion zu schreiben und den zu ladenden Inhalt zu beurteilen, wenn die Hash-Änderung ausgelöst wird. Der Nachteil besteht darin, dass Browser niedrigerer Versionen wie ie6 kein Hash unterstützen und ein zusätzlicher Iframe erstellt werden muss, um historische URLs aufzuzeichnen und eine Vorwärts- und Rückwärtsbewegung zu erreichen. Das größte Problem besteht darin, dass der nach # generierte Inhalt nicht von Suchmaschinen indiziert wird und die Verwendung von # zur Weiterleitung der Adresse an eine Anforderungsadresse von ?escape_fragment=url befürwortet , Jeder auf Renren, Sina Weibo und dem geschlossenen Douban hat gesehen, dass dieser Hash-Bang verwendet wurde oder wird. passieren#! Um eine URL ohne Aktualisierung zu laden, wird sie als schmutzige URL bezeichnet, da die allgemeine Methode nicht einfach von Suchmaschinen (z. B. inländischem Baidu) aufgenommen werden kann. Relativ gesehen kann pjax eine saubere URL verwenden, um den gleichen Effekt zu erzielen gut kompatibel mit verschiedenen Dieser Browser ist derzeit die am besten geeignete Methode

Verwendung von PHP+jQuery zur Implementierung von PJAX

Es ist nicht erforderlich, ein darauf basierendes Javascript-Plug-in zu schreiben pushState von Grund auf neu, da jQuery bereits ein Projekt hat. Es ist Open Source und einfach zu implementieren. Derzeit habe ich es in das in Entwicklung befindliche Projekt eingeführt und es ist sehr kompatibel mit dem Original. Ganz zu schweigen von der Werbung für die neue Version von Weibo. Ich hoffe, dass das Publikum sehen kann, dass ich danach aussehe Wenn Sie es verwenden, sehen Sie es auch nach der Verwendung.

Vorbereitung vor dem Start:

1 auf jQ (Open-Source-Projekt auf Github) https://github.com/defunkt/jquery-pjax

3. PHP-Projektcode (zur einfacheren Weitergabe verwendet dieser Artikel das yii-Framework zur Demonstration und das tatsächliche Entwicklung ist ähnlich)

1. Front-End-Implementierung

Es ist wirklich einfach zu verwenden und das jquery-pjax-Plug-in ist definitiv gut verpackt nach Ihren Wünschen angepasst werden (z. B. Kopieren des Effekts von g plus), der die oben genannten Schritte integriert:

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

Der Das ultimative Ziel besteht darin, den Text in p durch die ID von main mit dem entsprechenden Adressinhalt und der entsprechenden URL zu ersetzen. Das von Ajax zurückgegebene Ergebnis wird automatisch aktualisiert, wenn auf das Tag a geklickt wird, und die Seite wird nicht neu geladen. Beginnen wir mit der Implementierung der vom Backend zu verarbeitenden Inhalte

2. Implementierung der PHP-Seite

Die Aufgaben, die auf der PHP-Seite verarbeitet werden müssen, sind hauptsächlich 2: 1. Layout-Ansichtslayout implementieren 2 . Bestimmen Sie die Anforderung von pjax

Implementierung im Yii-Framework:

Verarbeiten Sie die Aktion wie folgt im Controller (nehmen Sie den Index von Artikel als Beispiel) :

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

Wirkungsdemonstrationsbild:

Nach dem Klicken auf den Artikellink oder den Artikellink erscheint Folgendes Es erscheint die Effektseite:

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

Bei der Verwendung von jquery-pjax zu beachtende Dinge:

1. Der zurückgegebene Vorlageninhalt darf kein einfacher Text sein und muss Wird mit HTML-Tags umschlossen

2. Informationen zur Verwendung des Plug-ins finden Sie in der Projektbeschreibung auf Github. Die Verwendung kann nach dem Update abweichen

3. Für niedrigere Versionen Bei Browsern, die Pushstate nicht unterstützen, ermittelt und verwendet das Pjax-Plugin automatisch den herkömmlichen Seitenlademodus

4. Wenn die Pjax-Anforderungszeit einer Seite die festgelegte Zeit überschreitet, wird sie mithilfe der Aktualisierung geladen. und die relevanten Parameter im Plug-in müssen angepasst werden

Das oben Gesagte habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Jquery und PHP kombiniert, um AJAX Long Polling zu implementieren

JS Ajax-Fortschrittsbarcode beim Laden

Vorläufiges Verständnis von JavaScript, Ajax, jQuery und Vergleich der Beziehung zwischen den dreien

Das obige ist der detaillierte Inhalt vonVerwenden Sie das in Yii integrierte pjax (pushstate+ajax), um die Seite ohne Aktualisierung zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!