How to maintain the status of AJAX pages and how to maintain the status of ajax pages

How to maintain the status of AJAX pages and how to maintain the status of ajax pages

For a traditional page, the browser accesses the page through a url. The content of the page is generated by the background service, and all the content of the page is sent back to the browser for rendering. When AJAX is popular, a lot of information is AJAX asynchronous requests, such as clicking and turning pages. Normally, when you refresh the browser, the current page will be reset to the initial state. Not to mention sending the url of the information you see to a friend.

The traditional status is saved in the address bar, for example, www.abc.com/search? S = abc & id = 23 & page = 3

If this method is used, the browser refreshes the page. If the anchor is used, the browser is not refreshed. Specifically, when you click the page to request data, the value after "#" in the address bar will be changed. Go to page 4

For example, abc.com/search?s=abc&id=23&page=4

This is far from enough. If a user clicks forward and backward, the page content will not change. Previously, we used a timer to solve this problem by referring to other people's practices on the Internet.

/*** URL Watcher (require jQuery) * monitors url changes * useage: * UrlWatcher. init (50); * UrlWatcher. addListener (function (url, isFirstLoad) {* FrontEngine. generateFront (); *}); **/var UrlWatcher = {"init": function (waittime) {this. urlArray = [window. location. href]; // set current url as default this. listenerArray = []; this. resetWaitTime (waittime);}, "AddListener": function (listener) {// add a process function this. listenerArray. push (listener | function () {}) ;}, "DeleteListener": function () {this. listenerArray = [] ;}, "ResetWaitTime": function (time) {// start timer if (this. intervalHandle) {window. clearInterval (this. intervalHandle);} this. waitTime = time | 1000; this. intervalHandle = window. setInterval (this. listenerCall. setThis (this), this. waitTime) ;}, "ListenerCall": function () {var self = this, url = window. location. href; if (self. urlArray [self. urlArray. length-1] === url) {return;} window. clearInterval (this. intervalHandle); $. each (this. listenerArray, function (c, listener) {listener (url, self. urlArray. length = 0);}); this. urlArray. push (url); this. resetWaitTime (this. waitTime );}};

The status is also used in Gmail, but the url will not change. There are also dedicated frameworks to implement this function, such as RSH and History Framework.

Previously, I used this timer method to solve some problems. However, this timing method is not triggered in real time, and there will always be a latency, because it is timed to constantly detect the hash changes in the url.

Speaking of hash, hash changes support monitoring in new browsers. The haschange event is defined in html5. Currently, various browsers support haschange as follows:

Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)

IE 8

WebKit 528 + (Safari/Google Chrome)

Opera 10.70

As long as the browser version is larger than before, it is supported. In addition, when ie8 runs in ie7 mode, the onhashchange method exists in the window, but this event is not triggered. This method can be used to detect the document.doc umentMode of IE.

If ('onhashchange' in window) & (typeof document.doc umentMode === 'undefined') | document.doc umentMode = 8 )) {// the browser supports the onhashchange event indow. onhashchange = hashChangeFire; // TODO, corresponding to the operation function executed by the new hash} else {// if not, use the timer detection method setInterval (function () {var ischanged = isHashChanged (); // TODO, checks whether the hash value or a function of a segment has changed if (ischanged) {hashChangeFire (); // TODO, corresponding operation functions executed by the new hash}, 150 );}

There are still compatibility issues in ie6/7 and ie8 compatibility modes: you cannot use the forward and backward buttons of the browser to keep track of the changes, because these browsers do not create a history for the changes to the anchor.

To solve this problem, you can create a hidden iframe and control the history of ie by changing the hash of iframe, such as jQuery hashchange event.

The above is a detailed explanation of how to maintain the status of the AJAX page introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!