Pjax introduction and simple example of pjax in asp.net MVC3

I believe that many people are familiar with ajax and have some advantages, such as: Partial refreshing to improve user experience, reduce overhead, and faster response between servers and browsers.

However, its disadvantages are also obvious:

But now some websites (http://plus.google.com, http://www.github.com/) support this kind of browsing method: When you click a site link, not do page Jump, instead, refresh the website page. This user experience is much better than the whole page. There is a very important component. The ajax refresh of these websites supports the browser history. When refreshing the page, the address above the browser address bar will also be changed, the browser's rollback function can also be used to roll back to the previous page. So what should we do if we want to implement such a function?

In versions earlier than HTML5, the window object in the DOM provides the ability to read browser history through the window. history method, allowing you to forward and backward in user access records.

Starting from HTML5, we can start to operate this history stack. HTML5 history provides two new features: pushState and replaceState. We can add and modify the history object using these two methods, this allows you to add and modify history without refreshing a new page to move the browser forward and backward.

Pjax is called pushState + ajax. Click between pages is requested asynchronously through ajax, And the URL address of the whole page has changed, but the page has not been refreshed, the browser can also forward and backward.

 

For usage of pjax, refer.

Here are a few requests for <a> navigation.

The following is the homepage:

When pjax is used, its links and requests are as follows:

 

When pjax is not used, its links and requests are as follows:

We can see that although the address is the same, the number of pjax requests is significantly less than that of the conventional method.

Of course, the new features of html5 can only be used in browsers that support html5. in browsers that do not support html5, the conventional method will still be used.

Click here to download the Demo