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

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

WBOY

リリース： 2016-05-16 17:54:01

オリジナル

1478 人が閲覧しました

ただし、どれだけ近くにあるとしても、クライアントとサーバーの間でデータが読み込まれるまでの待ち時間が常に発生します。したがって、ほとんどの 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 リクエストステータスマネージャー
。