Example of using ajax and history.pushState to change the page URL without refreshing_AJAX related

This article mainly introduces the example of using ajax and history.pushState to change the page URL without refreshing. Friends in need can refer to the following

Performance

If you use When you visit this blog, github.com, plus.google.com and other websites with browsers such as chrome or firefox, if you are careful, you will find that clicks between pages are requested asynchronously through ajax, and the URL of the page changes at the same time. And it can support browser forward and backward very well.

What is it that has such a powerful function?

HTML5 references new APIs, history.pushState and history.replaceState, which are used to change the page URL without refreshing.
Differences from traditional AJAX

Traditional ajax has the following problems:

1. You can change the page content without refreshing, but you cannot change the page URL

2. For better accessibility, after the content changes, the hash of the URL is usually changed

3. The hash method cannot handle the browser's forward and backward issues well!

4. Furthermore, the browser has introduced the onhashchange interface. Browsers that do not support it can only periodically determine whether the hash has changed.

5. However, this method is very unfriendly to search engines

6. Twitter and Google have agreed to use #!xxx (that is, the first character of hash is!), and search engines support it.

In order to solve the problems caused by traditional ajax, new APIs have been introduced in HTML5, namely: history.pushState, history.replaceState

You can operate the browser history through the pushState and replaceState interfaces, and Change the URL of the current page.

pushState is to add the specified URL to the browser history, and replaceState is to replace the current URL with the specified URL.

How to use

<strong style="border-color: initial; border-width: 0px; padding: 0px; margin: 0px;">var state = { 
title: title, 
url: options.url, 
otherkey: othervalue 
}; 
window.history.pushState(state, document.title, url);</strong>

In addition to the title and url, you can also add other data to the state object. For example: you also want to configure some ajax configurations for sending Save it.

replaceState and pushState are similar, so I won’t introduce them much here.
How to respond to the browser's forward and backward operations

The onpopstate event is provided on the window object. The state object passed above will become a sub-object of the event, so that the stored title and URL can be obtained.

window.addEventListener('popstate', function(e){ 
if (history.state){ 
var state = e.state; 
//do something(state.url, state.title); 
} 
}, false);

In this way, you can combine ajax and pushState for perfect browsing without refreshing.
Some restrictions

1. The URL passed must be in the same domain and cannot cross domains

2. Although the state object can store many custom attributes, it cannot be serialized Objects cannot be stored, such as: DOM objects.
Some processing corresponding to the backend

In this mode, in addition to using ajax to browse without refreshing, it is also necessary to ensure that the changed URL can be browsed normally after directly requesting it, so the backend needs to process these. .

1. Send a special header to ajax using pushState, such as: setRequestHeader(‘PJAX’, ‘true’).

2. When the backend obtains the header with PJAX=true, the common parts of the page will not be output. For example: PHP can make the following judgment

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

Although the interface only has pushState, replaceState, and onpopstate, a lot of processing is required when using it.

A plug-in based on jquery has been written for this. The following article will introduce in detail how to use pjax (ajax pushState) to change the URL browsing without refreshing.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

3-point summary of Ajax technical principles_AJAX related

AJAX encapsulation class usage guide

AJAX Elementary Tutorial: First Introduction to AJAX

The above is the detailed content of Example of using ajax and history.pushState to change the page URL without refreshing_AJAX related. For more information, please follow other related articles on the PHP Chinese website!