PJAX stands for page-state + ajax. It allows pages to be loaded via ajax, but supports proper links / events / reloads etc. It also degrades gracefully if the content cannot be loaded. SPA stands for single-page application. It's a omdel in which an entire website (i.e. application) is contained on a single HTML page, with requests for new or specific content handled via JavaScript and injected into the page. SPAs generally perform much better than standard websites, so providing a method to make this transition quickly may be popular.
Pretty easy. You need to do three things.
You'll need:
- The pjax js
- both the jquery plugin
- and mjax.js
- Sean's pjax functions:
pjaxifyandpjax_html(I overloadedpjaxify)
$("//a[@class='home_link']") {
pjaxify(".page", "#Home")
}
What did we do here?
- We selected the links we want to load via pjax
- We added two attributes to these links
- The first attribute is a css selector for the content you want pjax to suck out of the anchor's href
- The second (optional) attribute is a css selector for a container in which you want to dump the contents
- If not provided, it defaults to the first argument
- The pjax JS sends along the first selector in its request, so the server can respond w/the proper content
If you wanted certain links to pjax different content, easy! This is specified w a different argument to pjaxify
pjax_html() {
# Normal tritium here
# ...
}
This responds to the headers that pjax sends via ajax (x-pjax and x-pjax-extract). It extracts the title and content from the html and resets the response to be exactly what the pjax javascript expects.
- Open your inspector
- Stay on the Elements tab
- Go to this page
- Click on links (those in the header for footer are well tested) and watch the DOM change (children of the
<body>)
- Use local storage to store { requests : responses } (most SPAs do this)
- Add transitions between pages, a loading indicator, etc. to improve aesthetics
This project works with the MoovSDK.
See detailed documentation for the MoovSDK at http://beta.moovweb.com
Remember to put all domains you're going to hit in your etc/hosts
or to run your server with the -auto-hosts=true option.
127.0.0.1 mlocal.moovweb.com
127.0.0.1 mlocal.beta.moovweb.com