Maak je een website met veel ajax requests is het handig om na te denken om deze call te cachen. Je kunt dit uiteraard op de server zelf doen, wat leidt tot een snellere response en een ontlasting van je database, of nog beter aan de client-side (in je browser). Voordeel van de client-side is dat je totaal geen request meer doet aan de server waardoor de gebruiker direct resultaat ziet. Een plugin die dit voor je regelt is Smartjax.

Smartjax is een jQuery plugin die werkt op de client-side en tevens ervoor zorgt dat per call kunt bepalen wanneer en hoelang je deze call wilt cachen. De plugin is ook handig in gebruik. Het enige wat je als developer hoeft te doen is je jQuery dollar-teken te vervangen. zie code voorbeeld hieronder.

/*standaard ajax post */
$.ajax({
    url:'http://httpbin.org/post',
    type: 'POST',
    data:{
        a:1,b:2
    }
});
/* smartjax post */
Smartjax.ajax({
    url:'http://httpbin.org/post',
    type: 'POST',
    data:{
        a:1,b:2
    }
});

Overzicht type caching

Om te bepalen wanneer de cache ververst moet worden maak je gebruik van de property “store” in je aanroep. De mogelijkheden zijn “page”, “tab”, “forever” en false. Bij “page” wordt de cache pas ververst als de pagina wordt herladen. Bij “tab” indien de browsertab wordt afgesloten. Bij “forever” blijft de cache altijd in het geheugen. Bij false wordt het response nooit gecached.

Smartjax.ajax({
    url:'http://httpbin.org/post',
    type: 'POST',
    data:{
        a:1,b:2
    },
    store:"page" /*mogelijkheden zijn: page,tab, forever of false*/
});

Opruimen van de cache.

Wil je dat de cache in zijn geheel wordt vernieuwd gebruik dan de methode “cleanAll”.

Smartjax.cleanAll();

Door een smartjax call een property “id” of “group” mee te geven kun je deze calls ook individueel vernieuwen. Je gebruikt dan de methode “cleanStore” met als parameters group en/of ids.

Smartjax.cleanStore({groups:["g1"], ids:["i1"]});

Voor een overzicht van alle mogelijke instellingen van de plugin kun je vinden op de GitHub pagina van Smartjax.  De link is https://github.com/VoidCanvas/Smartjax