ajax - AJAXローダーを使用するための最良のアプローチ?

Question

コンテンツ DIV を動的に更新する前に AJAX ローダーを起動するためのいくつかの貧弱なソリューションを実装しましたが、どれも「普遍的」ではないようで、実行するたびに作り直しています。ユーザーがページでクリックした内容に応じて更新されるコンテンツを含む DIV があり、このコンテンツ DIV の上にローダーを表示したい場合、最善の方法は何ですか? 一部の開発者はローダーを常にページに配置しており、ブロックを表示するか何も表示しないか、DIV に追加する開発者もいます。更新できる複数のエリアもある場合はどうなりますか? 関数で呼び出すことができる繰り返し可能なものを考えています。おそらくいくつかのパラメーターを渡します。

Answer 1

一部の JavaScript ライブラリでは、リクエストの開始と終了をリッスンできます。Prototype の request Responder http://www.prototypejs.org/api/ajax/respondersを確認してください。

次のようにします。

Ajax.Responders.register({
  onCreate: function() {
    $('loader').show();
    Ajax.activeRequestCount++;
  },
  onComplete: function() {
    Ajax.activeRequestCount--;
    if (Ajax.activeRequestCount < 1) $('loader').hide();
  }
});

ローディングの視覚的表現に関しては、個別のローディング グラフィックが必要なページのさまざまな部分を特定し、Request オブジェクトをサブクラス化し、その都度リクエストのタイプを示すことができます。

例:
保存されているフィールドですか? new FieldUpdateRequest(field)
ロードされているページですか？new Request();
コンテナは更新されていますか?new PartialRequest(div);

次に、各サブクラス タイプをキャプチャし、異なるローダー グラフィックを表示または非表示にします。

残念ながら、すぐに解決する方法はありません、ハル。コンテナーにローダー グラフィックスを追加するための汎用スクリプトを作成できます。これにより、繰り返しを節約できます。もしそうなら、ここに投稿してください:)？

Answer 2

JQuery プログレス バーなどを別のライブラリで使用できます。