HTML5 History API for refreshing

In HTML5, 1. added the function of adding a project to the browser history through JS. 2. the URL in the browser's address bar is displayed without refreshing the page. 3. Add events triggered when the user clicks the back button of the browser. With the above three points, you can dynamically change the URL in the browser's address bar without refreshing the page and dynamically display the page content. For example, if the content of page A is different from that of page B 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 the back button function, you can add # XXXX in the URL address to implement the back function. Now in HTML5, you can use the History API to implement the following processing: 1. On page A, send an AJAX request to request B data on the page. 2. Load the corresponding information to the corresponding location through JS in page. 3. Use the History API to switch from the URL of page A to the URL of page B in the address bar of the browser without refreshing the page. The number of historical items in the length attribute of the History API in html4. The history that javascript can handle is limited to the range that the browser's "Forward" and "backward" keys can go. This attribute returns the sum of the number of addresses included under the "Forward" and "back" buttons. Method back () is equivalent to pressing the "back" key. Forward () is equivalent to pressing the forward key. Go () usage: history. go (x); go to a specified address in the historical range. If x <0, x addresses are removed. If x> 0, x addresses are forwarded. If x = 0, the current web page is refreshed. History. go (0) is equivalent to location. reload. History API in HTML5 1. history. pushState (data, title [, url]): adds a record to the top of the history record stack. data is passed as a parameter when an onpopstate event is triggered. title is the page title, this parameter is ignored by all browsers. The url is the page address. Optional. The default value is the current page address. 2. history. replaceState (data, title [, url]): changes the current history. The parameters are the same as above. 3. history. state: used to store data of the preceding method. Different browsers have different read/write permissions. 4. popstate event: this event is triggered when you click the back or forward button of the browser. Read the state attribute value of the event object that triggers the event in the event handler function. The attribute value is the first parameter value used to execute the pushState method, it saves the objects that are synchronized and saved by adding records to the browser history. So far, IE10, firefox4 and later versions, chrome 8 and later versions, Safari5, and Opera11 browsers support the History API in HTML5. Why do we need to use the History API while ajax brings us benefits such as improving user experience and reducing the number of HTTP connections, it also gradually reveals some shortcomings, such: you cannot use the browser's forward and backward operations to switch between the front and back data. Using AJAX alone is not conducive to search engine optimization. Demo: As shown in the preceding figure, index.html displays the content in Test 1 when I click Test 1. the browser address in Test 1 is forwarded to the URL in Test 1, similarly, both test 2 and Test 3 are the same. You can use the forward and backward buttons in the address bar. 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> <a href =" http://localhost/demo/html5/index2.php "> Test 2 </a> </li> <a href =" http://localhost/demo/html5/index3.php "> Test 3 </a> </li> </ul> <div class =" all-content "> <ul class =" content "> <li> 111 </ li> <li> 222 </li> <li> 333 </li> </ul> </div> index. php code output is as follows: a JSON format is output <? Php $ data = json_decode (file_get_contents ("php: // input"); header ("Content-Type: application/json; charset = UTF-8 "); echo ('[{"age": 24, "sex": "boy", "name": "huangxueming" },{ "age": 26, "sex ": "boy", "name": "huangxueming2"}] ');?> The code output of index2.php is as follows: <? Php $ data = json_decode (file_get_contents ("php: // input"); header ("Content-Type: application/json; charset = UTF-8 "); echo ('[{"age": 65, "sex": "boy2", "name": "huangxueming2" },{ "age": 26, "sex ": "boy", "name": "huangxueming2"}] ');?> The code output of index3.php 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"}] ');?> All JS Code is as follows:/*** HTML5 history and ajax */$ (function () {var ajax, currentState; $ ('. container li '). unbind (). bind ('click', function (e) {e. preventDefault (); var target = e.tar get, url = $ (target ). attr ('href ');! $ (This ). hasClass ('current') & $ (this ). addClass ('current '). siblings (). removeClass ("current"); if (ajax = undefined) {currentState = {url: document. location. href, title: document. title, html: Certificate ('.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 ++) {html + = '<li>' + data [I]. age + '</li>' + '<li>' + data [I]. name + '</li>' + '<li>' + data [I]. sex + '</li>';} Comment ('.content'html (html);} var state = {url: url, title: document. title, html: Certificate ('.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; Subject ('.content'{.html(event.state.html);} else {document. title = currentState. title; Certificate ('.content'{.html(currentstate.html );}});});