Comment maintenir ajax dans l'état de la page

Cette fois, je vais vous montrer comment maintenir ajax dans l'état page, et quelles sont les précautions pour maintenir ajax dans l'état page. Ce qui suit est un cas pratique, jetons un coup d'œil.

Page traditionnelle, le navigateur accède à la page via l'url Le contenu de la page est généré par le service en arrière-plan et tout le contenu de la page est ensuite renvoyé au navigateur pour. rendu et affichage. 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 derrière le « # » 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 minuterie 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 window, 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 existe toujours un problème de compatibilité dans les modes de compatibilité ie6/7 et ie8 : vous ne pouvez pas utiliser les boutons avant et arrière du navigateur pour suivre, car ces navigateurs ne créent pas d'historique pour les modifications de points d'ancrage.

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".

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter l'édition de tables en temps réel avec PHP+Ajax

Comment utiliser Ajax pour charger dynamiquement des données Fonction

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!