Using history to solve ajax does not support forward/backward/refresh, historyajax

Using history to solve ajax does not support forward/backward/refresh, historyajax
Preface:

Currently, both the front and back ends use ajax to interact with the front and back ends. However, ajax has a small disadvantage: it does not support the browser's "backward" and "Forward" keys.

However, now we can solve this small bug of ajax interaction requests through the histroy attribute of H5.

Event Description:

An event window. onpopstate is added to H5. When you click the two buttons, the event will be triggered. However, it is not enough to detect this event. You must pass some parameters, that is, you must know the pageIndex of the page when you return to the previous page. Through the pushState method of history, pushState (pageIndex) stores the pageIndex of the current page, and obtains the pageIndex when returning to this page.

Window. history. pushState description:

window.history.pushState(state, title, url);

State object: A JavaScript Object. It is related to the new history object created by the pushState () method. Used to store information about the entries you want to insert into history. The State object can be any Json string. Because firefox uses the user's hard disk to access the state object, the maximum storage space of this object is 640 kb. If the value is greater than this value, the pushState () method throws an exception.

Title: firefox ignores this parameter now, although it may be used in the future. The safest way to use this function is to pass an empty string to prevent future modifications.

Url: used to pass the URL of the new history object. The browser will not load the URL after the pushState () method is called. You may try to load the URL later. For example, after the user restarts the browser, the new url may not be an absolute path. If it is a relative path, it will be relative to the existing url. The new url must be in the same domain as the existing url, otherwise pushState () will throw an exception. This parameter is optional. If it is null, It will be set to the current url of the document.

Directly paste the Code:

1/** 2 * Created: Aaron. 3 * address: http://www.cnblogs.com/aaron-pan/ 4 */5 6 // var pageIndex = window. history. state = null? 0: window. history. state. page; 7 8 (function ($, window, undefined) {9 var loadData = {10 pageIndex: window. history. state = null? 1: window. history. state. page, 11 // pageIndex: 0, 12 init: function () {13 this. getData (this. pageIndex); 14 this. nextPage (); 15}, 16 getData: function (pageIndex) {17 var that = this; 18 $. ajax ({19 type: 'post', 20 url :'. /data/getMovices '+ pageIndex + '. json ', 21 dataType: 'json', 22 async: false, 23 success: function (data) {24 that. renderDom (data); 25} 26}) 27}, 28 renderDom: function (movies) {29 var bookHtml = 30 "<table>" + 31 "< Tr> "+ 32" <th> movie </th> "+ 33" <th> Director </th> "+ 34" <th> release time </th> "+ 35" </tr> "; 36 for (var I = 0; I <movies. length; I ++) {37 bookHtml + = 38 "<tr>" + 39 "<td>" + movies [I]. moviesName + "</td>" + 40 "<td> <a>" + movies [I]. moviesEditor + "</a> </td>" + 41 "<td>" + movies [I]. times + "</td>" + 42 "</tr>"; 43} 44 bookHtml + = "</table> "; 45 bookHtml + = 46 "<button> previous page </button>" + 47 "<button class = 'nextpage'> next page </button>"; 48 $ ('B Ody'0000.html (bookHtml); 49}, 50 nextPage: function () {51 var that = this; 52 $ (document ). on ("click ",". nextPage ", function () {53 that. pageIndex ++; 54 that. getData (that. pageIndex); 55 window. history. pushState ({page: that. pageIndex}, null, window. location. href); 56 // return and refresh to the homepage window. history. replaceState ({page: that. pageIndex}, null, window. location. href); 57}) 58}, 59}; 60 loadData. init (); 61 window. addEventListener (" Popstate ", function (event) {62 var page = 0; 63 if (event. state! = Null) {64 page = event. state. page; 65 console. log ('page: '+ page); 66} 67 console. log ('page: '+ page); 68 loadData. getData (page); 69 loadData. pageIndex = page; 70}) 71 72}) (jQuery, window, undefined );

You can view the running result by directly calling the js file on the html page.

Running result:

In this way, the functions of listening forward/back-end/Refresh can be achieved through ajax interaction.

Browser compatibility:

 

For more information, see:

Ajax with HTML5 history pushState/replaceState instance: http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

Improve ajax List request experience with history of h5: http://www.cnblogs.com/yincheng/p/h5-history.html