ページのステータスで Ajax を維持する方法

今回は、ページステータスでajaxを維持する方法と、ページステータスでajaxを維持するための注意事項を説明します。実際のケースを見てみましょう。

従来のページの場合、ブラウザは 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( ('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);
}

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

PHP+Ajax でテーブルのリアルタイム編集を実現する方法

Ajax を使用してデータを動的にロードする機能を実現する方法

以上がページのステータスで Ajax を維持する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。