Ausführliche Erläuterung der Idee, den AJAX-Seitenstatus beizubehalten

Als AJAX populär war, wurden viele Informationen asynchron von AJAX angefordert, wie z. B. Klicks, Umblättern usw. Normalerweise wird in diesem Fall die aktuelle Seite beim Aktualisieren des Browsers auf den Ausgangszustand zurückgesetzt. Ganz zu schweigen davon, dass Sie die Informations-URL, die Sie gesehen haben, an Ihre Freunde senden. Lassen Sie mich die Implementierungsideen mit Ihnen teilen. Werfen wir einen Blick auf die detaillierte Erklärung der AJAX-Seitenstatuspflegeidee.

Herkömmliche Seite, der Browser greift über die -URL auf die Seite zu Der Inhalt der Seite wird vom Hintergrunddienst zum Rendern an den Browser zurückgesendet. Als AJAX populär wurde, forderte AJAX viele Informationen asynchron an, z. B. Klicks, Umblättern usw. Normalerweise wird in diesem Fall die aktuelle Seite beim Aktualisieren des Browsers auf den Ausgangszustand zurückgesetzt. Ganz zu schweigen davon, dass Sie die Informations-URL, die Sie gesehen haben, an Ihre Freunde senden.

Der herkömmliche Status wird in der Adressleiste gespeichert, z. B.: www.abc.com/search?s=abc&id=23&page=3

Wenn diese Methode verwendet wird, wird der Browser aktualisiert Wenn Sie Anker verwenden, wird der Browser nicht aktualisiert. Insbesondere wenn Sie auf die Seite klicken, um Daten anzufordern, wird der Wert nach „#“ in der Adressleiste geändert. Wir gehen zur vierten Seite

wie:

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

Dies reicht nicht aus, wenn der Benutzer auf „klickt“. Vorwärts“ und „Zurück“ ändert sich der Seiteninhalt nicht entsprechend. Ich habe einen

Timer verwendet, um das Problem basierend auf dem, was andere online gemacht haben, zu lösen.

/**
 * 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 verwendet ebenfalls die Statusspeicherung, die URL ändert sich jedoch nicht. Es gibt auch spezielle Frameworks, die diese Funktion implementieren, wie zum Beispiel RSH und History Framework.

Ich habe diese Timer-Methode bereits verwendet, um einige Probleme zu lösen. Allerdings wird diese Timing-Methode nicht in Echtzeit ausgelöst, es kommt immer zu einer Verzögerung, da sie so getimt ist, dass sie kontinuierlich Änderungen im Hash in der URL erkennt.

Apropos Hash: Hash-Änderungen können in neuen Browsern überwacht werden. Es handelt sich um das haschange-Ereignis, das in HTML5 definiert ist. Derzeit unterstützt jeder Browser haschange wie folgt:

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

IE 8

WebKit 528+ ( Safari/Google Chrome)

Opera 10.70

Solange die Browserversion älter als die Vorgängerversion ist, wird sie unterstützt. Wenn IE8 im IE7-Modus ausgeführt wird, ist außerdem die onhashchange-Methode unter dem Fenster vorhanden, dieses Ereignis wird jedoch nicht ausgelöst. Es kann durch Erkennen des

document.documentMode des IE erkannt werden.

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);
}

Es gibt immer noch Kompatibilitätsprobleme in den Kompatibilitätsmodi ie6/7 und ie8: Die Vor- und Zurück-Schaltflächen des Browsers können nicht verwendet werden Behalten Sie den Überblick, da diese Browser keinen Verlauf der Ankeränderungen erstellen.

Um dieses Problem zu lösen, können Sie einen versteckten Iframe erstellen und den Verlauf des IE steuern, indem Sie den Hash des Iframes ändern, z. B. „jQuery-Hashchange-Ereignis“.

Das Obige ist eine detaillierte Erklärung der vom Herausgeber eingeführten AJAX-Seitenstatus-Pflegeideen. Ich hoffe, dass sie für alle hilfreich sind. !

Verwandte Empfehlungen:

Detaillierte Erläuterung der Vorsichtsmaßnahmen für Webservice-Aufrufe mit jQuery-Ajax anhand von Beispielen

Detaillierte Erläuterung von Front-End-Ajax und Back- Interaktion beenden

Die Stärke von Ajax beim dynamischen Laden von Daten teilen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Idee, den AJAX-Seitenstatus beizubehalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!