Detailed explanation of the idea of ​​maintaining AJAX page status

When AJAX was popular, a lot of information was requested asynchronously by AJAX, such as clicks, page turning, etc. Usually in this case, as soon as you refresh the browser, the current page will be reset to its initial state. Not to mention sending the information URL you saw to your friends. Let me share with you the implementation ideas. Let’s take a look at the detailed explanation of the AJAX page status maintenance idea.

Traditional pages, the browser accesses the page through the url, and the content of the page is generated by the background service and then all the content of the page is generated. Sent back to the browser for rendering. When AJAX became popular, a lot of information was requested asynchronously by AJAX, such as clicks, page turning, etc. Usually in this case, as soon as you refresh the browser, the current page will be reset to its initial state. Not to mention sending the information URL you saw to your friends.

The traditional status is saved in the address bar, such as: www.abc.com/search?s=abc&id=23&page=3

If this method is used, the browser will refresh the page. If you use anchors, the browser will not refresh. Specifically, when you click on the page to request data, the value behind the "#" in the address bar will be changed. We turn to the fourth page

For example: abc.com/search#s=abc&id=23&page=4

This is not enough. If the user clicks " Forward" and "Back", the page content will not change accordingly. I used a timer to solve the problem based on what others have done online.

/**
 * URL Watcher(require jQuery)
 * 监测url的变化
 * 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);
  }
};

Gmail also uses state retention, but the url will not change. There are also specialized frameworks that implement this function, such as RSH and History Framework.

I solved some problems before using this timer method. However, this timing method is not triggered in real time, there will always be a delay, because it is timed to continuously detect changes in the hash in the URL.

Speaking of hash, hash changes can be monitored in new browsers. It is the haschange event, which is defined in HTML5. Currently, each browser supports 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 older than the previous version, it is supported. In addition, when IE8 is running in IE7 mode, the onhashchange method exists under window, but this event will not be triggered. It can be detected by detecting IE's document.documentMode.

if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8))
{   // 浏览器支持onhashchange事件   
indow.onhashchange = hashChangeFire; // TODO，对应新的hash执行的操作函数
} 
else 
{   // 不支持则用定时器检测的办法   
setInterval(function() {     
var ischanged = isHashChanged(); // TODO，检测hash值或其中某一段是否更改的函数    
if(ischanged)
{       
hashChangeFire(); // TODO，对应新的hash执行的操作函数    
}  
},
150);
}

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

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

The above is a detailed explanation of the AJAX page status maintenance ideas introduced by the editor. I hope it will be helpful to everyone! !

Related recommendations:

Detailed examples of jQuery ajax calling webservice precautions

Detailed explanation of the interaction between front-end ajax and back-end

Ajax realizes the sharing of the strength of dynamically loading data

The above is the detailed content of Detailed explanation of the idea of ​​maintaining AJAX page status. For more information, please follow other related articles on the PHP Chinese website!