PJAX on RightJS

Question

I was just reading around and got somehow interested in RightJS. I have been using jquery as my main javascript framework but now I wanted to learn something new. However I would like to know of RightJS could do PJAX. I am aware that as long as you understand how PJAX works, you could implement it in any framework. However, I wish someone could guide me on how to build this.

Thanks in advance for any help.

Answer 1

PJAX is for sissies, that's official :)

Use AJAX + History.js (it has hooks for RightJS)

Answer 2

For the most part PJAX consists of:

1. perform ajax request to get given pages html (Page can check for header in order to know whether it should return full html or just the content that will be changing)
2. Add the returned HTML in to the container.
3. Use the pushstate history API to update the browser location.

To ensure it all degrades gracefully you will need to apply the PJAX listeners to internal links using JavaScript, so that the links will all work normally for people with JS disabled. It should also do some feature checking to ensure a users browser supports the pushstate API etc (and if not again leave everything as normal links).

I actually implemented a native JS version of PJAX myself if your interested in taking a look at how stuff can be achieved: https://github.com/thybag/PJAX-Standalone/blob/master/pjax-standalone.js

Additionally you can also browser the source of the JQuery PJAX here: https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js

Answer 3

Like @Carl, I have implemented a stand-alone implementation of pushState + AJAX navigation, see HTMLDecor.

The philosophy of PJAX is:

1. a page consists of unique content + site decor (banners, nav, ads, stylesheets, etc).
2. when a user first visits a site, send a complete page.
3. when the user navigates to a new page in the site just send the unique content, not the complete page. (Although PJAX can be configured to extract the unique content from a complete page).

The philosophy of HTMLDecor is:

1. a page consists of unique content + a <link> to the site decor + the HTMLDecor.js script.
2. when a user first visits a site, send the page (mostly unique content). In the browser, HTMLDecor examines the <link>, fetches the site decor and merges it with the page.
3. when the user navigates to a new page, the page is already the unique content, so send it as is. HTMLDecor will update the unique content of the page and call pushState() to update the URL.

In other words, put all the site decor in a separate file and let HTMLDecor.js merge it with the unique content in the browser. After that, pushState support comes for free - you don't need to configure anything.

HTMLDecor.js is only 6kB when minified and gzipped, which is small compared to most js frameworks. You could (should) leave RightJS out of your normal pages (which should only contain unique content) and only place it in the site decor page.

Probably this all makes more sense if you see a demo of HTMLDecor. Look at my blog. If you view the page source you will see that the ad at the top of the page, the navbar at the bottom, and the contact popup aren't part of the page source. They are all added with AJAX.

When you navigate to one of the blog articles, pushState + AJAX is used (if supported on the browser), and you see that the ad and navbar aren't refreshed.

There is also an article which introduces HTMLDecor in more detail.