How to maintain ajax in page status-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to maintain ajax in page status

Apr 02, 2018 am 09:27 AM

ajax state

This time I will show you how to maintain ajax in the page state, and what are the things to note . The following is a practical case, let's take a look.

For traditional pages, the browser accesses the

page through url. The content of the page is generated by the background service and then sent back to the browser for rendering and display. 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 after "#" 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);
  }
};

Copy after login

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) &amp;&amp; ((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);
}

Copy after login

There are still compatibility issues in ie6/7 and ie8 compatibility modes: you cannot use the browser's forward and back buttons to keep track, because these browsers do not create history for anchor point 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".

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!