Was ist Pjax

Was ist pjax?

Viele Websites (Facebook, Twitter) unterstützen mittlerweile eine solche Browsing-Methode. Wenn Sie auf einen Link innerhalb der Website klicken, wird nicht zur Seite gesprungen, sondern nur innerhalb der Website . Die Seite wird aktualisiert. Diese Art von Benutzererfahrung ist viel besser, als wenn die gesamte Seite blinkt.

Es gibt einen sehr wichtigen Teil der Ajax-Aktualisierung dieser Websites. Beim Aktualisieren der Seite ändert sich auch die Adresse im Browser-Adressfeld der vorherigen Seite.

Wenn wir also eine solche Funktion implementieren wollen, wie machen wir das?

Ich habe festgestellt, dass pjax ein Skript zur Unterstützung dieser Funktionalität bereitstellt.

Die Pjax-Projektadresse lautet https://github.com/defunkt/jquery-pjax. Den tatsächlichen Effekt finden Sie unter: http://pjax.heroku.com/ Wenn pjax nicht aktiviert ist, wird durch Klicken auf den Link ein Sprung ausgeführt. Nach der Überprüfung werden die Links per Ajax aktualisiert.

Warum pjax verwenden?

pjax hat mehrere Vorteile:

Verbesserung der Benutzererfahrung. Wenn die Seite springt, muss das menschliche Auge die gesamte Seite neu identifizieren. Beim Aktualisieren eines Teils der Seite muss nur ein Bereich neu identifiziert werden. Da ich auf meiner Website die Pjax-Technologie verwendet habe, habe ich das Gefühl, dass es viel unangenehmer ist, andere Websites zu besuchen, die nur Seitensprünge haben. Da beim Aktualisieren einiger Seiten eine Ladeaufforderung angezeigt wird und die alte Seite beim Aktualisieren weiterhin im Browser angezeigt wird, können Benutzer gleichzeitig längere Seitenladezeiten tolerieren.

Reduzieren Sie den Bandbreitenverbrauch und den Serververbrauch erheblich. Da nur ein Teil der Seite aktualisiert wird, werden die meisten Anforderungen (CSS/JS) nicht erneut abgerufen und der äußere Rahmen der Website mit Benutzeranmeldeinformationen muss nicht neu generiert werden. Obwohl ich den Verbrauch dieses Teils nicht speziell gezählt habe, schätze ich, dass mindestens 40 % der Anfragen und mehr als 30 % des Serververbrauchs eingespart wurden.

Ich denke, es gibt auch Nachteile:

Obwohl ich die Unterstützung historischer Browser wie IE6 nicht wirklich getestet habe, wird es Probleme mit der Kompatibilität mit älteren Browsern geben, da pjax neue Standards verwendet. Pjax selbst unterstützt jedoch den Fallback. Wenn festgestellt wird, dass der Browser diese Funktion nicht unterstützt, springt er zur Originalseite zurück.

Komplexe serverseitige Unterstützung: Die Serverseite muss basierend auf eingehenden Anforderungen bestimmen, ob eine vollständige Seitenwiedergabe oder eine teilweise Seitenwiedergabe durchgeführt werden soll. Bei gut gestaltetem Servercode sollte die Unterstützung dieser Funktionalität jedoch kein großes Problem darstellen.

In der Summe können durch die Verbesserung des Benutzererlebnisses und der Ressourcenauslastung die Nachteile vollständig ausgeglichen werden. Ich kann jedem nur wärmstens empfehlen, es zu verwenden.

Wie verwende ich pjax?

Schauen Sie sich einfach die offizielle Dokumentation an.

Ich denke, Techniker sollten sich angewöhnen, technische Informationen aus erster Hand zu lesen.

Es gibt ein Rails-Gem-Plugin für Pjax, das direkt verwendet werden kann. Es gibt auch Django-Unterstützung.

Prinzipien von pjax

Um mit Problemen umgehen zu können, müssen wir verstehen, wie pjax funktioniert. Der Pjax-Code hat nur eine Datei: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

Wenn Sie die Möglichkeit dazu haben, können Sie einen Blick darauf werfen selbst. Lassen Sie mich das Prinzip hier erklären.

Zuerst geben wir im HTML an, welcher Linkinhalt pjaxiert werden muss und welcher Teil nach dem Klicken aktualisiert werden muss (fügen Sie ihn in das data-pjax-Attribut ein):

$('a[data-pjax]').pjax()

Wenn das Pjax-Skript geladen wurde, fängt es die Ereignisse dieser Links ab, packt sie dann in eine Ajax-Anfrage und sendet sie an den Server.

$.fn.pjax = function( container, options ) {
  return this.live('click.pjax', function(event){
    handleClick(event, container, options)
  })
}
function handleClick(event, container, options) {
  $.pjax($.extend({}, defaults, options))
  ...
  event.preventDefault()
}
var pjax = $.pjax = function( options ) {
  ...
  pjax.xhr = $.ajax(options)
}

Diese Anfrage trägt die HEADER-Kennung von X-PJAX. Wenn der Server eine solche Anfrage erhält, weiß er, dass er nur einen Teil der Seite rendern und zurückgeben muss.

xhr.setRequestHeader('X-PJAX', 'true')
xhr.setRequestHeader('X-PJAX-Container', context.selector)

Nachdem pjax die zurückgegebene Anfrage erhalten hat, aktualisiert es den von data-pjax angegebenen Bereich und aktualisiert auch die Adresse des Browsers.

options.success = function(data, status, xhr) {
  var container = extractContainer(data, xhr, options)
  ...
  if (container.title) document.title = container.title
  context.html(container.contents)
}

Um den Rückzug des Browsers zu unterstützen, wird die Verlaufs-API verwendet, um die entsprechenden Informationen aufzuzeichnen.

pjax.state = {
  id: options.id || uniqueId(),
  url: container.url,
  container: context.selector,
  fragment: options.fragment,
  timeout: options.timeout
}
if (options.push || options.replace) {
  window.history.replaceState(pjax.state, container.title, container.url)
}

Wenn sich der Browser zurückzieht, wird das Ereignis abgefangen und aufgezeichnet Informationen, generieren Sie eine neue Ajax-Anfrage.

$(window).bind('popstate', function(event){
  var state = event.state
  if (state && state.container) {
    var container = $(state.container)
    if (container.length) {
      ...
      var options = {
        id: state.id,
        url: state.url,
        container: container,
        push: false,
        fragment: state.fragment,
        timeout: state.timeout,
        scrollTo: false
      }
      if (contents) {
        // pjax event is deprecated
        $(document).trigger('pjax', [null, options])
        container.trigger('pjax:start', [null, options])
        // end.pjax event is deprecated
        container.trigger('start.pjax', [null, options])
        container.html(contents)
        pjax.state = state
        container.trigger('pjax:end', [null, options])
        // end.pjax event is deprecated
        container.trigger('end.pjax', [null, options])
      } else {
        $.pjax(options)
      }
      ...
    }
  }
}

Um Fallback zu unterstützen, muss zum einen festgestellt werden, ob der Browser beim Laden die History-Pushstate-API unterstützt:

// Is pjax supported by this browser?
$.support.pjax =
  window.history && window.history.pushState && window.history.replaceState
  // pushState isn't reliable on iOS until 5.
  && !navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork)/)

Die andere besteht darin, festzustellen, ob die Anforderung vorhanden ist Wenn eine bestimmte Zeit lang nicht auf eine Antwort geantwortet wurde (Sie können den Parameter „Timeout“ festlegen), können Sie direkt zur Seite springen.

options.beforeSend = function(xhr, settings) {
  if (settings.timeout > 0) {
    timeoutTimer = setTimeout(function() {
      if (fire('pjax:timeout', [xhr, options]))
        xhr.abort('timeout')
    }, settings.timeout)
    // Clear timeout setting so jquerys internal timeout isn't invoked
    settings.timeout = 0

Fazit

Nachdem Sie das gesehen haben, warum verwenden Sie nicht tatsächlich pjax? Es gibt so viele Vorteile, dass ich denke, dass fast alle Websites pjax verwenden sollten. Nutzen Sie es jetzt!