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

Source: Internet
Author: User

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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.