Shulou(Shulou.com)06/03 Report--

This article focuses on "how to use ajax to achieve no refresh to change the page content and address bar URL", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use ajax to change the page content and address bar URL without refresh.

The difference from the traditional AJAX

Traditional ajax has the following problems:

Although ajax can change the content of the page without refresh, it cannot change the page URL

Second, for better accessibility, change the hash of the URL after the content has changed. However, the way of hash can not well deal with the forward and backward problems of browsers.

Some browsers have introduced the interface of onhashchange, and unsupported browsers can only regularly judge whether the hash has changed.

In addition, the use of ajax is very unfriendly to search engines, and the area where spiders climb is often empty.

In order to solve the problems caused by traditional ajax, a new API, namely history.pushState, history.replaceState, is introduced into HTML5.

You can manipulate the browser history through the pushState and replaceState interfaces and change the URL of the current page.

PushState adds the specified URL to the browser history, and replaceState replaces the current URL with the specified URL.

How to call

The copy code is as follows:

Var state = {

Title: title

Url: options.url

Otherkey: othervalue

}

Window.history.pushState (state, document.title, url)

In addition to title and url, the state object can also add other data, for example, you want to save some configurations that send ajax.

ReplaceState and pushState are similar and do not need to be explained.

How to respond to the forward and backward operations of the browser

The onpopstate event is provided on the window object, and the state object passed above becomes a child of event, so you can get the stored title and URL.

The copy code is as follows:

Window.addEventListener ('popstate', function (e) {

If (history.state) {

Var state = e.state

/ / do something (state.url, state.title)

}

}, false)

This allows the perfect combination of ajax and pushState for non-refresh browsing.

Some restrictions

1. It is inevitable that there is no cross-domain. To quote a classic saying I once saw on the Internet: "if javascript can cross domains, then he can turn against the sky!"

2. Although the state object can store many custom properties, the value cannot be an object.

Some processing corresponding to the backend

In this mode, in addition to the current use of ajax without refresh browsing, it is also possible to browse normally after directly requesting a changed URL, so the backend has to deal with these.

1. You can send a special header to the ajax that combines pushState, such as setRequestHeader ('PJAX',' true').

2. When the backend gets the header with PJAX=true, it will not output all the common parts of the page. For example, PHP can be judged by the following

The copy code is as follows:

Function is_pjax () {

Return array_key_exists ('HTTP_X_PJAX', $_ SERVER) & & $_ SERVER [' HTTP_X_PJAX'] = = 'true'

}

Although there are only pushState, replaceState and onpopstate on the interface, a lot of processing still needs to be done when using it.

At this point, I believe you have a deeper understanding of "how to use ajax to change page content and address bar URL without refresh". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.