Html5:history API No refresh change Address bar

HTML5 New History API can be implemented without refresh to change the Address bar link, with AJAX can be done without refreshing jump.

Simply put: Assuming the current page is renfei.org/ , then execute the following JavaScript statement:

window.history.pushState(null, null, "/profile/");

After that, the address bar's address becomes renfei.org/profile/ , but the browser does not refresh the page, and does not even detect whether the target page exists.

Application: Full-site Ajax, and enable the browser to crawl Ajax pages

What can I do with this? A more common scenario is to work with AJAX.

If the left side of a page is a number of navigation links, the right side is the content, while navigating only the right side of the content needs to be updated, then refreshing the entire page is undoubtedly wasteful. At this point we can use AJAX to pull the right data. However, if this is the case, the address bar will not change, the user can not go forward, backward, and can not collect the current page or share the current page to others; Search engine crawling is also difficult. at this point, you can use the HTML5 's history API to solve this problem.

Idea: Bind the click event first. When the user clicks on a link, the preventDefault function prevents the default behavior (page jumps), while reading the link's address (if there is jquery, can be written $(this).attr(‘href‘) ), the address is pushState plugged into the browser history, and then using AJAX technology pull (if there is jquery, You can use the $.get method) to replace the contents of the current Web page with the actual contents of this address.

In order to handle the user forward and backward, we listen to popstate events. When the user clicks the forward or Back button, the browser address is automatically converted to the appropriate address, and the popstate event occurs. In the event handler, we grab the corresponding content according to the current address, then use AJAX to pull the actual content of this address, rendering, can be.

Finally, the entire process does not change the page title, you can document.title change the page title by directly assigning the value.

Reference Source: http://www.renfei.org/blog/html5-introduction-3-history-api.html

Html5:history API No refresh change Address bar