Explication détaillée de l'idée de maintenir le statut de la page AJAX

Quand AJAX était populaire, de nombreuses informations étaient demandées de manière asynchrone par AJAX, telles que les clics, les pages tournées, etc. Habituellement, dans ce cas, dès que vous actualisez le navigateur, la page actuelle sera réinitialisée à son état initial. Sans parler de l'envoi de l'URL d'information que vous avez vue à vos amis. Permettez-moi de partager avec vous les idées d'implémentation. Jetons un coup d'œil à l'explication détaillée de l'idée de maintenance du statut de la page AJAX

Page traditionnelle, le navigateur accède à la page via l'url. le contenu de la page est généré par le service d'arrière-plan renvoyé au navigateur pour le rendu. Lorsque AJAX est devenu populaire, de nombreuses informations ont été demandées de manière asynchrone par AJAX, telles que les clics, les pages tournées, etc. Habituellement, dans ce cas, dès que vous actualisez le navigateur, la page actuelle sera réinitialisée à son état initial. Sans parler de l'envoi de l'URL d'information que vous avez vue à vos amis.

Le statut traditionnel est enregistré dans la barre d'adresse, tel que : www.abc.com/search?s=abc&id=23&page=3

Si cette méthode est utilisée, le navigateur s'actualisera la page, si vous utilisez des ancres, le navigateur ne s'actualisera pas. Plus précisément, lorsque vous cliquez sur la page pour demander des données, la valeur après « # » dans la barre d'adresse sera modifiée. On se tourne vers la quatrième page

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

Ceci ne suffit pas. Si l'utilisateur clique sur ". Suivant" et "Retour", le contenu de la page ne changera pas en conséquence. J'ai utilisé un minuteur pour résoudre le problème en fonction de ce que d'autres ont fait en ligne.

/**
 * 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 utilise également la rétention d'état, mais l'URL ne changera pas. Il existe également des frameworks spécialisés qui implémentent cette fonction, tels que RSH et History Framework.

J'ai déjà utilisé cette méthode de minuterie pour résoudre certains problèmes. Cependant, cette méthode de timing n'est pas déclenchée en temps réel, il y aura toujours un retard, car elle est chronométrée pour détecter en permanence les changements dans le hachage de l'URL.

En parlant de hachage, les modifications de hachage peuvent être surveillées dans les nouveaux navigateurs. Il s'agit de l'événement haschange, défini en HTML5. Actuellement, chaque navigateur prend en charge haschange comme suit :

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

IE 8

WebKit 528+ (Safari/Google Chrome)

Opera 10.70

Tant que la version du navigateur est antérieure à la version précédente, elle est prise en charge. De plus, lorsque IE8 s'exécute en mode IE7, la méthode onhashchange existe sous la fenêtre, mais cet événement ne sera pas déclenché. Il peut être détecté en détectant le document.documentMode d'IE.

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

Il y a toujours des problèmes de compatibilité dans les modes de compatibilité ie6/7 et ie8 : les boutons avant et arrière du navigateur ne peuvent pas être utilisés Gardez une trace, car ces navigateurs ne créent pas d’historique des modifications d’ancre.

Pour résoudre ce problème, vous pouvez créer une iframe cachée et contrôler l'historique d'IE en modifiant le hachage de l'iframe, tel que "événement de hachage jQuery".

Ce qui précède est une explication détaillée des idées de maintenance du statut des pages AJAX présentées par l'éditeur. J'espère que cela sera utile à tout le monde ! !

Recommandations associées :

Explication détaillée des précautions du service Web d'appel ajax jQuery avec des exemples

Explication détaillée de l'ajax frontal et du back-end mettre fin à l'interaction

Partager la force d'Ajax dans le chargement dynamique des données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!