ホームページ > 記事 > ウェブフロントエンド > AJAXページのステータスを維持する考え方を詳しく解説

AJAXページのステータスを維持する考え方を詳しく解説

韦小宝オリジナル: 2018-01-01 19:46:311346ブラウズ

AJAX が普及していた頃、クリックやページめくりなど、多くの情報が AJAX によって非同期的に要求されました。通常、この場合、ブラウザを更新するとすぐに、現在のページが初期状態にリセットされます。見た情報のURLを友達に送るのはもちろん。実装のアイデアを共有しましょう。従来のページの場合、ブラウザは

url を通じてページにアクセスし、ページのコンテンツはバックグラウンドサービスによって生成されます。その後、レンダリングと表示のためにブラウザに送り返されます。 AJAX が普及したとき、クリックやページめくりなど、多くの情報が AJAX によって非同期的に要求されました。通常、この場合、ブラウザを更新するとすぐに、現在のページが初期状態にリセットされます。見た情報のURLを友達に送るのはもちろん。

従来のステータスは、www.abc.com/search?s=abc&id=23&page=3 のようにアドレスバーに保存されます

この方法を使用すると、ブラウザはページを更新しますが、アンカーを使用すると、場合、ブラウザは更新されません。具体的には、ページをクリックしてデータをリクエストすると、アドレスバーの「#」の後ろの値が変更されます。次の 4 番目のページに移ります

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

これでは十分ではありません。ユーザーが「進む」または「戻る」をクリックしても、ページのコンテンツは表示されません。変更します。他の人がオンラインで行ったことに基づいて、タイマー

を使用して問題を解決しました。

/**
 * 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 も状態保持を使用しますが、URL は変更されません。 RSH や History Framework など、この機能を実装する特殊なフレームワークもあります。

私は以前、いくつかの問題を解決するためにこのタイマー方法を使用しました。ただし、このタイミング方法はリアルタイムではトリガーされず、URL 内のハッシュの変更を継続的に検出するようにタイミングが設定されるため、常に遅延が発生します。

ハッシュといえば、ハッシュの変更は新しいブラウザーで監視できます。 HTML5で定義されているhaschangeイベントです。現在、各ブラウザは次の haschange をサポートしています:

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

IE 8

WebKit 528+ (Safari/Google Chrome)

Opera 10.70

以前よりも古いものはすべてサポートされています。さらに、IE8 が IE7 モードで実行されている場合、onhashchange メソッドは window の下に存在しますが、このイベントはトリガーされません。 IEの

document

.documentModeを検出することで検出できます。

if( (&#39;onhashchange&#39; in window) && ((typeof document.documentMode===&#39;undefined&#39;) || document.documentMode==8))
{   // 浏览器支持onhashchange事件   
indow.onhashchange = hashChangeFire; // TODO，对应新的hash执行的操作函数
} 
else 
{   // 不支持则用定时器检测的办法   
setInterval(function() {     
var ischanged = isHashChanged(); // TODO，检测hash值或其中某一段是否更改的函数    
if(ischanged)
{       
hashChangeFire(); // TODO，对应新的hash执行的操作函数    
}  
},
150);
}

ie6/7 および ie8 互換モードには互換性の問題がまだあります。これらのブラウザはアンカーポイントの変更履歴を作成しないため、ブラウザの進むボタンと戻るボタンを使用して追跡することはできません。

この問題を解決するには、非表示の iframe を作成し、「jQuery hashchange イベント」などの iframe のハッシュを変更することで IE の履歴を制御できます。

以上、編集者が紹介したAJAXページのステータス維持のアイデアを詳しく説明しましたので、皆様のお役に立てれば幸いです。！

AJAXページのステータスを維持する考え方を詳しく解説

関連記事