Viele von euch werden sich als Erstes vermutlich folgende Frage stellen: PJAX? Sollte das nicht eher AJAX hei\u00dfen?<\/p>\n
Die Antwort hierauf lautet klar Nein – bei PJAX handelt es sich um eine speziellere Art der Datenorganisation, basierend auf AJAX. <\/p>\n Wenn du beispielsweise Facebook, Twitter oder auch LinkedIn verwendest, ist dir sicher schon einmal aufgefallen, dass du zwar alle m\u00f6glichen Links und Buttons anklicken kannst, sich die Website dabei aber nie komplett neu l\u00e4dt. Wenn dir das bewusst ist, dann hast du bereits begriffen, worum es bei der PJAX-Technik eigentlich geht – dem Austauschen und Nachladen von Inhalten innerhalb bestimmter definierter Bereiche einer Website. Das bedeutet, dass die Website beim ersten Zugriff einmalig komplett geladen wird. Wenn dann irgendwo geklickt wird, wird lediglich der Inhalt mit jenem der eigentlichen Zielseite ausgetauscht, und so nebenbei \u00e4ndert sich auf die URL in der Browser-Zeile.<\/p>\n Der Vorteil liegt nun darin, dass einzelne Seiten einer Website dadurch wesentlich schneller geladen werden k\u00f6nnen, da nicht permanent alle (zum Teil externen) Ressourcen jedes Mal aufs Neue nachgeladen werden m\u00fcssen. F\u00fcr den User selbst wirkt das Ganze dadurch wesentlich ruhiger und auch fl\u00fcssiger, zumal durch das wegfallende Nachladen und den damit verbundenen Neuaufbau der Seite das entstehende Flackern komplett wegf\u00e4llt.<\/p>\n <\/p>\n Die Integration der PJAX-Technik gestaltet sich verh\u00e4ltnism\u00e4\u00dfig einfach. Es lassen sich damit auch \u00e4ltere Websites aufr\u00fcsten. Alles was daf\u00fcr notwendig ist, wird mit wenigen Javascript bzw. jQuery<\/a>-Funktionen gel\u00f6st.<\/p>\n <\/p>\n Event-Listener auf Javascript-Basis funktionieren normalerweise so, dass diese eine Funktion bzw. ein Verhaltensmuster definieren, welches bestimmt, was bei einem bestimmten Ausl\u00f6ser (z.B. ein Klick) mit dem betreffenden Element (z.B. ein Button) geschehen soll. Diese Funktion wird f\u00fcr gew\u00f6hnlich direkt an das jeweilige Element gebunden. Dies geschieht, indem der Browser bei einem Seitenaufruf alle Elemente der Reihe nach rendert, und wenn er damit fertig ist, die notwendigen Event-Listener an diese bindet.<\/p>\n Da bei PJAX (oder teilweise auch bei AJAX) Elemente neu geladen, und dadurch \u00fcberschrieben werden, werden in diesem Fall auch alle Event-Listener (vom alten Element) ebenfalls \u00fcberschrieben. Der Browser selbst f\u00fchrt aber keine erneute Initialisierung dieser neuen Elemente durch. Daher sind die alten Event-Listener bei nachgeladenen Elementen wirkungslos.<\/p>\n Wir m\u00fcssen also daf\u00fcr sorgen, dass die betreffenden Elemente wissen, dass es durchaus einen (oder auch mehrere) Event-Listener gibt. Dazu sollte dieser aber nicht direkt an das Element geh\u00e4ngt, sondern au\u00dferhalb von diesem platziert werden. Diesen Vorgang bezeichnet man als „delegaten“.<\/p>\n Um euch dies in der Praxis zu zeigen, hier mal ein Beispiel f\u00fcr einen regul\u00e4ren jQuery-Event-Listener (wird bei einem Klick ausgel\u00f6st):<\/p>\n Wie man hier sieht, wird zuerst das betreffende Element („#my_button<\/em>„) ausgew\u00e4hlt, und dann auf dieses ein Klick-Event-Listner gelegt.<\/p>\n Bei einem delegateten Listener sieht dies nun ein wenig anders aus:<\/p>\n In diesem Fall w\u00e4hlen wir als erstes statt dem Ziel-Element („#my_button<\/em>„) ein beliebiges anderes aus, welches sich garantiert nicht \u00e4ndern wird (hier „body<\/em>„). Diesem sagen wir nun, dass es einen Event f\u00fcr ein anderes Element „halten“ wird.<\/p>\n Innerhalb der delegate()<\/strong><\/a>-Funktion geben wir nun an, welches Ziel-Element wir damit gerne ansprechen m\u00f6chten („#my_button<\/em>„) und auf welchen Ausl\u00f6ser es reagieren soll (hier: „click<\/em>„).<\/p>\n Das bringt uns in der Praxis jenen Vorteil, dass wir Elemente beliebig austauschen und ersetzen k\u00f6nnen und die Event-Listener dennoch funktionieren, da sich diese ganz wo anders befinden.<\/p>\n <\/p>\n W\u00fcrde man auf der Website einen Link anklicken, w\u00fcrde der Browser diesen ganz normal laden, indem er einen kompletten Reload der Website (wenn es interner Link ist) durchf\u00fchrt.<\/p>\n Aber der Sinn von PJAX ist ja, genau dieses Verhalten zu unterbinden, und Inhalte dynamisch auszutauschen bzw. bei Bedarf nachzuladen.<\/p>\n Dazu legen wir auf den Link einen Klick-Event-Listener, welcher das Standardverhalten blockiert, sodass wir nun unseren eigenen Link-Handler definieren k\u00f6nnen:<\/p>\n Das Problem an diesem Event-Listener ist aber, dass dieser ALLE Links blockieren w\u00fcrde, aber unser eigener Link-Handler nur die internen Verlinkungen behandeln soll.<\/p>\n Ich hab euch daf\u00fcr mal folgenden Event-Handler vorbereitet:<\/p>\n Als Erstes wird Schritt f\u00fcr Schritt \u00fcberpr\u00fcft, ob der betreffende Link von unserem Klick-Handler behandelt werden soll oder nicht.<\/p>\n F\u00fcr den positiven Fall wird nun festgelegt, welcher Bereich gegen den neuen ausgetauscht werden soll – in diesem Fall w\u00e4re es der <main\/><\/strong>-Block innerhalb des HTML<\/a>-Bodys (definiert in der Variable targetSelector<\/em>).<\/p>\n Anschlie\u00dfend kann die eigentliche URL des Links via AJAX geladen werden (mittels $.get()<\/strong><\/a>).<\/p>\n Wenn die URL nun via AJAX geladen werden konnte, sagen wir jQuery explizit, dass die Antwort unter Nutzung des DOMParser()<\/strong> als HTML interpretiert werden soll.<\/p>\n In diesem geparsten HTML suchen wir nun unseren gew\u00fcnschten Block (in diesem Fall <main\/><\/strong> mittels der Variable\u00a0targetSelector<\/em> von oben), und ersetzen diesen Block im alten HTML dann gegen den neuen, indem wir mittels der html()<\/strong><\/a>-Funktion einfach dessen Inhalt mit jenem von unserem geparsten und gefilterten HTML \u00fcberschreiben.<\/p>\n <\/p>\n Das gleiche Verhalten wie bei den Links \u00fcbertragen wir nun auch auf Formulare.<\/p>\n Der einzige Unterschied hierbei ist jener, dass wir beim Absenden des Formulars im Prinzip nur einen kleinen Teilbereich ersetzen m\u00fcssen.<\/p>\n Am einfachsten ist es hier einen Container um das eigentliche Formular herum zu legen.<\/p>\n Beim Formular selbst legen wir nun mit Hilfe eines Data-Attributs (hier als „data-refresh-target“ bezeichnet) fest, in welchen Container wir die Antwort nach dem Absenden gerne laden m\u00f6chten.<\/p>\n Nun aber zu unserem Submit-Handler:<\/p>\n Innerhalb von diesem lesen wir nun mittels der data()<\/strong><\/a>-Funktion den Ziel-Container aus (\u00fcber das Data-Attribut „refresh-target<\/em>„, welches wir zuvor bereits am Form-Element festgelegt haben), in welchen wir die Antwort sp\u00e4ter hineinladen m\u00f6chten.<\/p>\n Als n\u00e4chstes pr\u00fcfen wir, ob das betreffende Formular via GET oder via POST versendet werden soll. Wir bekommen diese Information direkt vom Form-Element anhand des Attributs „method<\/em>„. Damit auch der Inhalt der Formular-Felder \u00fcbergeben wird, serialisieren wir diese mittels der serialize()<\/strong><\/a>-Funktion und \u00fcbergeben dies als Parameter „data<\/em>“ der ajax()<\/strong><\/a>-Funktion.<\/p>\n Anstatt der ajax()<\/strong><\/a>-Funktion k\u00f6nnte man ebenso gut mit $.get()<\/strong><\/a> oder $.post()<\/strong><\/a> arbeiten. Der Vorteil bei Ersterem liegt darin, dass wir den Request-Typ (GET oder POST) direkt \u00fcber ein einzelnes Attribut („type<\/em>„) steuern k\u00f6nnen.<\/p>\n Gleich wie beim Link-Handler von oben ersetzen wir nun einfach den Inhalt vom alten Container durch das zur\u00fcckgelieferte HTML. <\/p>\n Damit w\u00e4ren wir nun mit allen erforderlichen Ma\u00dfnahmen f\u00fcr das asynchrone Datenhandling durch.<\/p>\n Da das Ganze aber am Anfang doch etwas kompliziert ist, hab ich euch ein kleines Beispiel (basierend auf dem CodeIgniter-Framework) zusammengestellt:<\/p>\n
\nWas es aber konkret damit auf sich hat, und was euch diese Technik in der Praxis wirklich bringt, m\u00f6chte ich euch hier zeigen. Daf\u00fcr sind allerdings zumindest durchschnittliche Kenntnisse in Javascript bzw. jQuery<\/a>\u00a0erforderlich! Wenn ihr jedoch nicht so viel Erfahrung mit jQuery haben solltet: kein Problem –\u00a0weiter unten\u00a0gibt’s ein fertiges Beispiel, welches ihr als Ausgangsbasis f\u00fcr euer eigenes Projekt nutzen k\u00f6nnt.<\/p>\nPJAX im allt\u00e4glichen Leben<\/h2>\n
PJAX in die Website\u00a0integrieren<\/h2>\n
Schritt 1: Events delegaten<\/h2>\n
$(\"#my_button\").click(function(){\r\n\talert('Click event triggered!');\r\n});<\/pre>\n$(\"body\").delegate(\"#my_button\", \"click\", function(){\r\n\talert('Click event triggered!');\r\n});<\/pre>\nSchritt 2: Verlinkungen \u00fcber Javascript umleiten<\/h2>\n
$('body').delegate('a', 'click', function (e) {\r\n\t\/\/ prevent default behaviour of the link\r\n\te.preventDefault();\r\n\r\n\t\/\/ TODO: handle custom link behaviour\r\n});<\/pre>\n$('body').delegate('a', 'click', function (e) {\r\n var link = e.currentTarget;\r\n var isError = false;\r\n\r\n \/\/ Middle click, cmd click, and ctrl click should open links in a new tab as normal.\r\n if (e.which > 1 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {\r\n isError = true;\r\n }\r\n\r\n \/\/ Ignore cross origin links\r\n if (location.protocol !== link.protocol || location.hostname !== link.hostname) {\r\n isError = true;\r\n }\r\n\r\n \/\/ Ignore case when a hash is being tacked on the current URL\r\n if (link.href.indexOf('#') > -1 && stripHash(link) == stripHash(location)) {\r\n isError = true;\r\n }\r\n\r\n \/\/ Ignore event with default prevented\r\n if (e.isDefaultPrevented()) {\r\n isError = true;\r\n }\r\n\r\n \/\/ Check if link target is \"_blank\"\r\n if ($(this).attr('target') == '_blank') {\r\n isError = true;\r\n }\r\n\r\n\r\n \/\/ Perform link click\r\n if (!$(this).hasClass('dropdown-toggle') &&\r\n !$(this).data('toggle') &&\r\n !isError) {\r\n\r\n \/\/ We define the DOM element \"main\" as primary container for our replaced content\r\n var targetSelector = 'main';\r\n var $target = $(targetSelector);\r\n var href = $(this).attr('href');\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n\r\n if (!$target.length) {\r\n \/\/ target element does not exist\r\n return;\r\n }\r\n\r\n $.get(href, function (data, status) {\r\n if (status === 'success') {\r\n var parser = new DOMParser();\r\n var $data = $(parser.parseFromString(data, 'text\/html'));\r\n var $newTarget = $data.find(targetSelector);\r\n var newTargetHtml = $newTarget.html();\r\n\r\n \/\/ Set HTML content from response\r\n $target.html( newTargetHtml );\r\n }\r\n else {\r\n alert(\"Unexpected response code: \" + status);\r\n }\r\n });\r\n }\r\n});<\/pre>\nSchritt 3: Formulare im Hintergrund versenden<\/h2>\n
<div id=\"my-form-container\">\r\n <form action=\"\" method=\"POST\" data-refresh-target=\"#my-form-container\">\r\n <input type=\"text\" name=\"demo\">\r\n \r\n <button type=\"submit\">Send message<\/button>\r\n <\/form>\r\n<\/div><\/pre>\n
$('body').delegate('form', 'submit', function (e) {\r\n var $this = $(this);\r\n var targetSelector = $this.data('refresh-target');\r\n var $target = $(targetSelector);\r\n\r\n if (!$target.length) {\r\n \/\/ target element does not exist\r\n return;\r\n }\r\n\r\n e.stopPropagation();\r\n e.preventDefault();\r\n\r\n\r\n var rqMethod = 'GET';\r\n var attrRqMethod = $(this).attr('method');\r\n var url = $this.attr('action');\r\n\r\n if (attrRqMethod) {\r\n rqMethod = attrRqMethod;\r\n }\r\n\r\n $.ajax({\r\n \/\/mimeType: 'text\/html; charset=utf-8', \/\/ ! Need set mimeType only when run from local file\r\n url: url,\r\n data: $(this).serialize(),\r\n type: rqMethod,\r\n cache: false,\r\n success: function (data, status, XHR) {\r\n\r\n \/\/ Set HTML content from response\r\n $target.html( data );\r\n\r\n },\r\n dataType: 'html'\r\n });\r\n});<\/pre>\n
\nIst dieses beispielsweise nicht definiert, wird ein Formular immer via GET versendet.<\/p>\n
\nWir gehen bei diesem Beispiel davon aus, dass als Antwort nur jenes HTML zur\u00fcckkommt, welches 1:1 in den Container eingef\u00fcgt wird, also ohne das restliche Layout rundherum.<\/p>\nVollst\u00e4ndiges Beispiel (Demo)<\/h2>\n