jQuery Ajax リクエスト ステート マネージャー package_jquery

ただし、どれだけ近くにあるとしても、クライアントとサーバーの間でデータが読み込まれるまでの待ち時間が常に発生します。したがって、ほとんどの Web サイトでは、Gif ダイナミック アイコンや「読み込み中...」などの単語を使用して、データがまだ読み込み中であることをユーザーに知らせます。ただし、この問題は非常に面倒で面倒な場合があります。この「Loading」を ajax リクエストの前に表示し、ajax が成功した後に非表示にするか、jquery の ajax と jQuery のグローバル イベント jQuery.ajaxStart() に書き込むかのいずれかになります。 ajaxStop() を使用して、ページ全体の ajax 状態を制御します。前者の方法は単純すぎて使用できません。リクエストごとにこの「Loading」を記述する必要があり、リクエストが成功したか失敗したかに関係なく、これを非表示にする必要があります。後者はグローバル、つまりページ全体のリクエスト ステータスをローカルに表示するという要件を満たせない場合があります。

これらの問題を解決するために、私は Ajax Request Status Manager という jQuery プラグインを開発しました。このプラグインを使うと読み込みの煩わしさが軽減されます。このプラグインを使用すると、Ajax リクエストをトリガーする前にすべてのリクエストを追加して書き込むことができます。必要なのは、ユーザー インタラクション イベントで .request() メソッドを実行することだけです。ページ上のすべてのリクエストを個別に読み込みを表示するように設定することも、グローバルに表示するように設定することもできます (読み込みは 1 つだけ表示されます)。以下はプラグインの具体的な使用法です:

読み込みの CSS スタイルをカスタマイズします:
.state-loading {background: #fff url(images/icon-ajax-loader.gif) 。 .. }

最新バージョンの jquery ファイルを引用します:


注: このプラグインは jquery1.4.4 以降のバージョンでのみテストされています。

Ajax リクエスト ステータス マネージャー プラグイン ファイルを引用します:


準備完了jquery のイベント:
$.loader.install( className, isGlobal );

で .install() メソッドを実行します。 パラメーターの説明:
className: カスタマイズされた読み込みクラス名を示す文字列。上記のように css で定義されたステートロード。

isGlobal: ブール値、ロードをグローバルに表示するか独立して表示するかを定義します。デフォルト値は true です。

成功後に必要な Ajax リクエスト パラメーターとコールバック メソッドを追加します:
$.loader( key ).add( modules, settings , callback );

パラメーターの説明:
キー: 文字列。指定されたモジュールのローダーを作成または取得するには、このキーを使用します。もちろん、同じキーで add() メソッドを複数回実行して異なるモジュールを追加することもできますが、このキーの設定とコールバックは共有されるため、後で追加された設定とコールバックは以前の設定とコールバックを上書きします。

モジュール: jquery オブジェクト。ページ内の同じリクエストで複数のモジュールからのデータを処理できるため、以前に install() メソッドが false に設定されていた場合は、ajax リクエストを実行するときにそれをこのローダーに追加します。すべてのモジュールの読み込みステータスが表示されます。

設定: マップ、jquery の ajax 設定パラメーター。ただし、ajax イベントを設定しないでください。これにより、プラグインのコールバック メソッドがオーバーライドされます。デフォルトのリクエスト タイプは GET です。

callback: 関数、成功後のコールバック関数。デフォルトでは json 型で返されるオブジェクトになります。

add() メソッドは、'module' というプレフィックスが付いた文字列配列を返します。たとえば、3 つの要素を追加すると、結果は ['module1', 'module2', 'module3'] になります。返された配列を通じて、指定したモジュールの 1 つのロードを削除することもできますが、必要に応じて、指定できない、つまりすべてを削除することもできます。

remove() メソッドは、指定されたモジュールを削除します:
$.loader( key ).remove( moduleId );

パラメータの説明:
moduleId: 文字列または配列、として指定します。文字列の場合はモジュールの 1 つが削除され、配列で指定された場合はモジュールが一括で削除されます。パラメータを指定しない場合はすべてのモジュールが削除されます。

例
userinfo という名前のローダーに 2 つのモジュールを追加します:

コードをコピーします コードは次のとおりです:

var id1 = $.loader( 'userinfo' ).add(
$( '#userinfo, #top-userinfo' ),
{ url: 'server/ userinfo.php ' },
function( data ) {
updateContent( $( '#userinfo, #topsection, #footer-userinfo' ), data );
}
);
別のモジュールを userinfo ローダーに追加します:

var id2 = $.loader( 'userinfo' ).add( $('#footer-userinfo') );
var idList = id1。 concat( id2 );
// result: [ 'module1', 'module2', 'module3' ]
2 番目のモジュール、つまり '#top-userinfo' のロードを削除します:
var ret = $.loader( 'userinfo' ).remove( idList[1] );
// 結果: true、モジュール: [ 'module1', 'module3' ]
対話型イベント request() で実行されます。メソッド:
$.loader( key ).request();
]
もちろん、以前に追加した ajax 設定とコールバックを放棄して、インタラクティブ イベントまたは $ に $.ajax を自分で記述することもできます。 .getなど次に、リクエストの前に $.loader( key ).show() を呼び出し、コールバック関数内で $.loader( key ).hide() を呼び出します。これにより、積載状況を柔軟に制御することもできます。

例

コードをコピー コードは次のとおりです:

$( '#getUserInfo ' ).bind( 'click', function() {
$.loader( 'userinfo' ).request();
});

最初から書き直します リクエスト:

コードをコピー コードは次のとおりです:

$( ' #getUserInfo' ).bind( 'click', function() {
$.loader( 'userinfo' ).show();
$.get( 'server/userinfo.php', function( data ) {
$.loader ( 'userinfo' ).hide();
updateContent( $( '#userinfo, #topsection, #footer-userinfo' ),
})
} );

注: リクエストが繰り返しトリガーされると、マネージャーは abor() を実行して、以前に完了していないリクエストを防止し、新しいリクエストを再発行します。ただし、jquery の ajaxError イベントを通じてエラー情報を出力する場合。この情報も間違っていると考えられるため、必要に応じて自分でフィルタリングする必要があります。

例

コードをコピー コードは次のとおりです:

//エラーログの出力
$( 'body' ).bind( 'ajaxError', function(event, xhr, settings, throwError ) {
// アボートエラーメッセージを除外します
if ( xhr.status == = 0 || xhr.readyState === 0 || throwError '

' );


このプラグインはシンプルで使いやすいです。コードのロジックはそれほど複雑ではありませんが、私の能力と技術レベルには限界があります。ご質問やバグがございましたら、nicolas-zhao@hotmail.com までメールでお知らせください。来てくれてありがとう！

パッケージのダウンロード:

Ajax リクエスト ステータス マネージャー
。