Use pjax to achieve no refreshing pages (compatible with the new jquery version) _ jquery

This article mainly introduces how to use pjax to achieve no additional page flip, compatible with the new version of jquery. If you need it, you can refer to pushState as an api that can operate history, the introduction and use of this api can be found here: http://www.welefen.com/use-ajax-and-pushstate.html

There are already http://github.com/, http://plus.google.com, http://www.welefen.com and other websites have been used.

Pjax is an encapsulation of ajax + pushState, allowing you to easily use the pushState technology.

It also supports cache and local storage. You can directly read local data during the next access, without having to perform the next access.

In addition, the display mode supports animation technology. You can use the built-in Animation Mode or customize the animation display mode.

Pjax is not described here. It is easy to use and can be easily refreshed.
I have read pjax, implemented the demo, and wrote some notes. However, jquery 1.9 deleted the live () method, and the new version of pjax was implemented using the on () method, recently, the project was useful, so I learned about the new usage method. Here I will take a new note.

Environment:
Download jquery 1.10.2
Download jquery. pjax. js

Usage:
Monitor all links whose classes are pjaxlink. Use pjax to update the Content of the container whose id is ToInsert on the link page to the container whose id is Content on this page. If the retrieved content takes more than 5 seconds, you can directly jump:

The Code is as follows:

$ (Document). pjax ('A. pjaxlink ',' # content', {fragment: '# ToInsert', timeout: 5000 });

Instance used:
The original page is redirected to the page. without changing the page content, I use pjax to monitor the Page Link and only update the list (ensure that the List container is the parent node of the paging container).

The Code is as follows:

If ($. support. pjax ){
// Traverse all paging containers
$ ('. Pagercontainer'). each (function (){
// Retrieve the list container
$ Listcontainer = $ (this). parent ();
// Obtain the ID of the List container
Var listcontainerid = $ listcontainer. attr ('id ');
// Use pjax to monitor all paging links and define pjax for updates
$ (Document). pjax ('#' + listcontainerid + '. pagercontainer A',' # '+ listcontainerid, {fragment:' # '+ listcontainerid, timeout: 5000 });
});
$ (Document). on ('pjax: send', function (){
// When pjax sends a request, the loading animation layer is displayed.
$ ('# Loading'). show ();
});
$ (Document). on ('pjax: complete', function (){
// Hide the loading animation layer after pjax completes Processing
// Because the speed is too fast, it will be redirected to the loading layer to flash, which affects the user experience. Therefore, a 500 millisecond delay is added here.
SetTimeout (function () {$ ('# loading'). hide ()}, 500 );
});
}