pushState + ajax = pjax

HTML5’s History API kom med pushState vilket kort och gott låter utvecklaren manipulera browser-historiken genom att manuellt peta in URL:ar på historikstacken. pushState är användbart för tillfällen då endast delar av webbsidan behöver laddas om, där det tidigare inte varit möjligt att samtidigt tala om för browsern att byta URL. Med pushState förändrar du URL:en på sidor med dynamiskt innehåll vilket lämnar användaren med en snabbare laddning och fungerande bakåt- och framåtknapp i browsern.

history.pushState(null, "dinosaurs", dinosaurs.html);

Här lägger vi till ett ny historik-post (dinosaurs.html) på stacken och passar samtidigt på att döpa om sidan till ”dinosaurs”.

pjax är ett jQuery-bibliotek som utnyttjar pushState och, som de själva säger, ökar browsingupplevelsen – nothing more.

pjax kan implementeras på ett flertal sätt, här följer ett:

<script type="text/javascript">
    "#nav change": function(el) {
        $.pjax({
            url: el.find(":selected").data("href"),
            container: "#main"
        });
    }
</script>
 
<div id="main">
    Hello dinosaurs!
</div>
 
<select id="nav">
    <option data-href="/home">home</option>
    <option data-href="/dinosaurs" selected="selected">dinosaurs</option>
</select>

I koden anropas funktionen pjax() när användaren byter värde i en select-box. pjax-anropet fungerar i stort sätt som ett vanligt ajax-anrop där det svar vi får tillbaka skrivs ut i den main-container vi plockar ut med selektorn "#main".

Det som slutligen, implicit och per default, sker är ett anorp till pushState där vi lägger till URL:en på stacken. Anropet ser ut något i stil med:

history.pushState(null, $(data).filter('title').text(), '/dinosaurs');

Ett smidigt sätt att förbättra upplevelsen för användaren.

Vill du labba med pjax hittar du koden här och för ett hands-on-exempel kan du titta närmare på den här koden.