Ajax and HTML5 History Pushstate/replacestate instances

First, this article is an example show

Three:

1. I just want to find an example, know how to use, use grammar and so on roll rough
2. With the search engine.
3. Own memo

Energy is always limited, yesterday an impulse, outside the Shanghai Pudong outside the ring booked a 90 meters house, to borrow money to raise down payment, loans and certificates and so on. HTML5 History related Knowledge points Phala Phala speak up is also a smelly and long binding cloth, the essence of God is not enough, here, directly an example.

II. Ajax onboarding and browser history forward and backward

As we all know, Ajax can achieve the non-flush operation of the page-the advantages, but also cause other problems, can not go forward and backward! Once upon a while, Gmail seemed to be using an iframe to fix it, and now HTML5 makes things as simple as a house.

When performing an AJAX operation, history plug an address (used) into the browser pushState (this is not refreshed), and then, when returned, through a URL or other reference, we can revert to the appearance of Ajax.

This demo shows that Ajax content loading and address bar forward and backward, typical applications, familiar with the relevant knowledge points are very helpful.

Third, demo example

You can click here: HTML5 History API and Ajax paging instances

The demo structure is as follows: left navigation menu, right side details.

If we want to be lazy, navigate to the direct URL address, click Refresh. But the head and tail content are the same, the refresh always seems wasteful. From the experience, click on the navigation, the right side of the Ajax local refresh is a more optimal strategy.

Ajax local refreshing side dishes, a little experience can be easily addressed. Now, if you ask the following requirements: Every time the Ajax refresh is the same as the page refresh, you can back to view the previous content, how to break?

My strategy is as follows:

• Each time you manually click on the menu on the left, I append the query contents of the Ajax address ( ? later) to the demo HTML page address, using the history.pushState plug into the browser history.
• Browser forward and backward, will trigger the window.onpopstate event, through the binding popstate event, can be based on the current URL address of the query content of the corresponding menu to perform Ajax loading, to achieve the Ajax forward and backward effect.
• When the page is first loaded, if there is no query address, or the query address does not match, the query content of the Ajax address of the first menu is used, and the history.replaceState current browser history is changed, and then the Ajax action is triggered.

So, you will see:

• The page was first loaded, although the suffix of the url we visited was bare .html , but the actual URL was finally:
  

  Because history.replaceState of being put together.

• Click on the left side of any menu, you will find that the right content is Ajax loading, but the page URL address has changed, for example, click Baoshan:
  

  Because the history was history.pushState stabbed.

• At this point, we click the Back button in the Address bar, which is this:
  

  Miraculously, the page did not refresh, and went back to the Pudong menu:
  

  Because window.onpopstate let the chrysanthemum knife again pull out.

Iv. Other points what

• History.pushstate
  To insert a knife in a chrysanthemum, use an example:

  History.pushstate ({}, "page title", "Xxx.html");

• history.pushstatehistory.replacestate
  To change the meaning of a chrysanthemum knife, use an example:

  History.replacestate (NULL, "page title", "Xxx.html");

• Window.onpopstate
  When the chrysanthemum knife is unplugged ..., use example:

  Window.addeventlistener ("Popstate", function () {    var currentstate = history.state;    /* * Why do you do     * * *    });

Browser compatibility table:

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Replacestate, Pushstate	5	4.0 (2.0)	10	11.50	5.0
History.state	18	4.0 (2.0)	10	11.50	6.0

Yes, that's all!

Added on 2013-06-20
@ Didi mentions Pjax in the comments. What is that pjax?

Pjax is a new technology based on ajax+history.pushstate that can change the content of a page without refreshing, and can change the URL of the page. The Pjax is a ajax + pushState package that supports local storage, animation, and many other functions. Currently support jquery, Qwrap, Kissy and many other versions.

Ajax and HTML5 History Pushstate/replacestate instances