So this is my first time writing an exploration post. I've been trying to learn new technologies as a web front-end developer. So I found PJAX, which is a PushState + AJAX jQuery plugin to make the experience of switching pages faster. I found it while exploring the Ghost blogging platform, which has the same effect but uses a different plugin called Ember.js, which I would like to explore later.
I used the GitHub repository "jquery-pjax" from defunkt to learn this plugin. There are also optimized different ones such as the repository "pjax" from MoOx.
To make testing more "realistic", and as I am currently using a computer running Windows while I am more familiar to Nginx than Windows IIS, I hosted my testing projects on OpenShift.
They way PJAX operate is basically changing and reloading one element on the page while keeping all other elements on the page the same. For example, if you have something like:
<!DOCTYPE html> <head> <title>Something</title> </head> <body> <h1>Title</h1> <div class="container" id="pjax-container"> <span>Body content</span> <a href="/2">Something on another page</a> <div> </body>
Every time you reload the page, the entire HTML file of
/2 will be reloaded, from the header to the footer. But if PJAX is used, you can basically tell PJAX to load a specific part of the document like
$(document).pjax('a', '#pjax-container') to set the target container fetched by tag
#pjax-container on the page you are fetching, and replace the content with the same identifier on the original page,
#pjax-container in this case, which leaves the tag
<h1> outside the container the same. This is a simple example, but think about this - especially when you have a very heavy header or navigation bar, or a specific set of data (fonts, js, style sheets) that is the same on the target page, this will certainly make a difference in loading speed of your website.
History API, Mozilla Developer Network: https://developer.mozilla.org/en-US/docs/Web/API/History_API , CC-BY-SA 2.5 ↩︎