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