HTML5 History API implementation without refresh jump

in the HTML5 ,

1. Added the function of adding items through JS in the browser history.

2. Display changes to the URL in the browser's address bar without refreshing the page.

3. Added the event that is triggered when the user clicks the browser's Back button.

Through the above three points, you can achieve without refreshing the page under the premise of dynamic changes in the browser address bar URL, dynamic display page content.

For example, when page A and page B content are different, before HTML5, if you switch from page A to page B, you need to switch from page A to page B in the browser, or, if you need to have a Back button function, you can add #xxxx at the URL address to achieve back function. Now in HTML5, the following processing can be done through the history API:

1. On page A, request the B data from the page by sending Ajax requests.

2. In page A through JS load the corresponding information to the corresponding location.

3. Switch from page A's URL address to the URL of page b in the browser's address bar, using the history API without refreshing the page.

The history API in HTML4

Property

1. The number of items in length history. The history that JavaScript can manage is limited to the range that the "forward" and "back" keys of the browser can go to. This property returns the and of the number of addresses that are contained under "forward" and "back" two keys.

Method

1. Back () is equivalent to pressing the back key.
2. Forward () forward, is equivalent to pressing the "forward" key.
3. Go () Usage: history.go (x); In the range of history to a specified address. If x < 0, back x address, if x > 0, Forward x address, if x = = 0, refresh the page that is now open. History.go (0) is equivalent to Location.reload ().

The history API in HTML5

1. History.pushstate (data, title [, url]): Add a record to the top of the history stack; data passes past as a parameter when the Onpopstate event is triggered; title is the title of the page and all browsers currently ignore this parameter The URL is the page address, optionally, the default is the current page address.

2. History.replacestate (data, title [, url]): Change the current history, parameters ibid.

3. History.state: Used to store data for the above methods, different browsers read and write permissions are not the same.

4. Popstate event: Triggers the event when the user clicks the browser's back or forward button. The value of the State property of the event object that triggers the event is read in the event handler value, which is the first parameter value that is used when the Pushstate method is executed, and holds the object that was saved in the synchronization of adding records to the browser history.

So far, ie10,firefox4 above version, Chrome8 above version, safari5,opera11 above version browser support HTML5 history API.

Why to use the history API

Ajax brings us to improve the user experience, reduce the number of HTTP connections and other benefits, but also gradually revealed some deficiencies, such as:

1. You cannot use the browser's forward or backward to switch data before and after.
2. Simply using AJAX is not conducive to SEO.

The screenshot shows the following:

As the above effect, the page came in when it was index.html when I hit the test 1 show the content browser address in Test 1 go to test 1 URL, same test 2 and test 3 are the same, and then we can through the address bar forward and back buttons can also be manipulated.

The basic code is as follows:

Index.html

<div class= "Container" >     <ul class= "List" >         <li>             <a href= "http://localhost/demo/ html5/index.php "> Test 1</a>         </li>          <li>             <a href= "http
://localhost/demo/html5/index2.php "> Test 2</a>         </li>         <li>              <a href= "http://localhost/demo/html5/index3.php" > Test 3</a>          </li>     </ul>     <div class= "All-content" >          <ul class= "Content" > &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBsp;     <li>111</li>              <li>222</li>             <li >333</li>         </ul>     </div> </div >

The index.php code output is as follows: output a JSON format

<?php
$data = Json_decode (file_get_contents ("Php://input"));
Header ("Content-type:application/json;    Charset=utf-8 ");
Echo ("[{" Age ":" Sex ":" Boy "," name ":" Huangxueming "},{" Age ":", "Sex": "Boy", "name": "Huangxueming2"}] "); 
  
   ?>
  

The index2.php code output is as follows:

<?php
$data = Json_decode (file_get_contents ("Php://input"));
Header ("Content-type:application/json;    Charset=utf-8 ");
Echo ("[{" Age ":" Sex ":" Boy2 "," name ":" Huangxueming2 "},{" Age ":", "Sex": "Boy", "name": "Huangxueming2"}] "); 
  ?>

The index3.php code output is as follows:

<?php
$data = Json_decode (file_get_contents ("Php://input"));
Header ("Content-type:application/json;    Charset=utf-8 ");
Echo (' [{' Age ': 244, ' sex ': ' boy4 ', ' name ': ' Huangxueming4 '},{' age ': 264, ' sex ': ' boy4 ', ' name ': ' Huangxueming4 '}] ' ;
? >

JS all the code is as follows:

/**  * HTML5 History and Ajax  */ $ (function () {    var ajax,     &NB
sp;   CurrentState;     $ (". Container li"). Unbind (). bind ("click", Function (e) {      
          E.preventdefault ();         var target = e.target,         
    URL = $ (target). attr ("href");        !$ (this). Hasclass (' current ') && $ (this). addclass (' current ').
Siblings (). Removeclass ("current");         if (Ajax = = undefined) {             CurrentState = {                 Url:document.location.href,                &nbsP Title:document.title,               
  HTML: $ (". Content"). html ()            };        }         ajax = $.ajax ({                 type: "POST",                  Url:url,                  dataType: "JSON",                  success:function (data) {    
                var html = "";                      if (data.Length > 0) {                         for (var i = 0, IList = Data.length I < IList i++) {   &nbs p;                         HTML + + "<li>" +data[i].age+ "</li>" +                                       "<li>" +data[i].name+ "</li> "+                                      "<li
> "+data[i].sex+" </li>;                        }                          $ (
". Content"). HTML (HTML);                     }                      var state = {                         Url:url,                          Title:document.title ,                          HTML: $ (". Content"). HTML ()                    };                   
  History.pushstate (State,null,url);                }    
    });

           });     Window.addeventlistener ("Popstate", function (event) {         if (Ajax = null) {              
  return;            }else if (event && event.state) {                 Document.title =
Event.state.title;                 $ (". Content "). html (event.state.html);            }else{      
          document.title = Currentstate.title;                 $ (". Content"). HTML (
currentstate.html);
           }    });  });

Demo download is as follows: (note: Be sure to put the file under the server to run it). For example, my http://localhost/demo/html5/index.php is a local demo file under the HTML5 file, as for the path can also be placed under the root directory to run.