pjax: js library that combines ajax and pushState

It is very helpful to encapsulate ajax and pushState for later use. This article is an introduction to pjax (ajax+pushState)

Introduction

pjax is an encapsulation of ajax + pushState, allowing you to use pushState technology very conveniently.

Supports both caching and local storage. The local data can be read directly the next time you visit, without the need for another visit.

And the display method supports animation technology. You can use the system’s own animation method or customize the animation display method.

Currently only jquery-based version is provided, and qwrap, tangram and other versions will be added in the future.

How to use

To deploy jquery.pjax.js to your page, you will need to use the a link of pjax for binding (you cannot bind the url of the external domain), such as:

$('a').pjax({
    container: '#container', //内容替换的容器
    fx: 'fade', //展现的动画，支持默认和fade, 可以自定义动画方式。
    cache: true, //是否使用缓存
    storage: true, //是否使用本地存储
    titleSuffix: '' //标题后缀
})

Events

General When using ajax to obtain data, we all hope to have a loading effect. Pjax itself does not provide this function, but provides two related events. If you need such a function, you can implement it in the event.

start.pjax is called before pjax ajax sends the request

end.pjax is called when phax ajax ends

This way you can display the loading effect in the start.pjax event and hide the loading in the end.pjax event. For example:

$('#container').bind('start.pjax', function(){
    $('#loading').show();
})
$('#container').bind('end.pjax', function(){
    $('#loading').hide();
})

Browser support

Only browsers that provide the history.pushState interface support this function. $.support.pjax is used to determine whether the browser supports it.

If the browser does not support this function and calls the pjax method, nothing is actually done, and the default link response mechanism is still used.

What the backend needs to do

Similar to ajax, the backend cannot use asynchronous requests. Public content is also returned.

So we need an interface to determine whether it is a pjax request. For example: PHP can learn from the following implementation

function gplus_is_pjax(){
    return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
}

Download the source code

pjax has been open source, and the code is placed at https://github.com/welefen/pjax. Everyone is welcome to visit and download.

Others

In fact, the encapsulation of this class is borrowed from https://github.com/defunkt/jquery-pjax

It adds functions such as caching, local storage and animation, and optimizes some parameters.