So behalten Sie den Ajax-Seitenstatus bei

Dieses Mal zeige ich Ihnen, wie Sie Ajax im Seitenstatus beibehalten und welche Vorsichtsmaßnahmen es gibt, um Ajax im Seitenstatus beizubehalten. Schauen wir uns das hier an.

Herkömmliche Seite, der Browser greift über die URL auf die Seite zu. Der Inhalt der Seite wird vom Hintergrunddienst generiert und der gesamte Inhalt der Seite wird dann an den Browser zurückgesendet Rendern und Anzeigen. 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 auf den Ausgangszustand zurückgesetzt, sobald Sie den Browser aktualisieren. 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 hinter dem „#“ 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 ein Kompatibilitätsproblem in den Kompatibilitätsmodi ie6/7 und ie8: Sie können die Vor- und Zurück-Schaltflächen des Browsers nicht verwenden, um den Überblick zu behalten, da diese Browser keinen Verlauf für Ankerpunktä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“.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie die Echtzeitbearbeitung von Tabellen mit PHP+Ajax

So verwenden Sie Ajax Funktion zum dynamischen Laden von Daten

Das obige ist der detaillierte Inhalt vonSo behalten Sie den Ajax-Seitenstatus bei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!