jQuery のイベントの詳細な紹介 Ajax_jquery

Ajax は多くのイベントをトリガーします。
イベントには 2 種類あり、1 つはローカル イベント、もう 1 つはグローバル イベントです。
ローカル イベント: $.ajax を通じて呼び出され、割り当てられます。

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

$.ajax({
beforeSend: function(){
// beforeSend イベントを処理します
}、
完了: function(){
// 完全なイベントを処理します
}
// ...
});

グローバル イベントは、bind を使用してバインドでき、unbind を使用してバインドを解除できます。これは、クリック/マウスダウン/キーアップなどのイベントに似ています。ただし、すべての DOM 要素に渡すことができます。

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

$("#loading").bind("ajaxSend", function(){ //bind
を使用する $(this).show();
}).ajaxComplete(function(){ //ajaxComplete を直接使用します
$(this).hide();
});

もちろん、特定の Ajax リクエストに対してグローバル イベントを生成したくない場合は、global:false
を設定できます。

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

$.ajax({
URL: "test.html",
グローバル: false、
// ...
});

イベントの順序は次のとおりです:

ajaxStart グローバル イベント
新しい Ajax リクエストを開始します。現時点では他の Ajax リクエストは進行中ではありません。
beforeローカルイベントを送信
Ajax リクエストの開始時に発生します。必要に応じて、ここで XHR オブジェクトを設定できます。
ajaxSend グローバル イベント
リクエストの開始前にグローバル イベントがトリガーされました
地元イベントの成功
リクエストが成功するとトリガーされます。つまり、サーバーはエラーを返さず、返されたデータにはエラーがありません。
ajaxSuccess グローバル イベント
グローバルリクエストは成功しました
エラーローカルイベント
エラーが発生した場合にのみトリガーされます。成功コールバック関数とエラーコールバック関数の両方を同時に実行することはできません。
ajaxError グローバル イベント
エラーが発生したときにグローバルにトリガーされます
ローカルイベントを完了
リクエストが成功したか失敗したかに関係なく、たとえそれが同期リクエストであっても、リクエストの完了時にこのイベントをトリガーできます。
ajaxComplete グローバル イベント
グローバルリクエストが完了するとトリガーされます
ajaxStop グローバル イベント
Ajax が実行中でないときに発生します。

ローカル イベント コールバックのパラメータはドキュメントに明確に記載されているため、ここでは詳しく説明しません。

グローバル イベントでは、ajaxStart と ajaxStop を除き、他のイベントには 3 つのパラメーターがあります
イベント、XMLHttpRequest、ajaxOptions
1 つ目はイベント、2 つ目は XHR オブジェクト、そして 3 つ目のパラメータが最も便利で、この ajax を呼び出すときのパラメータです。
ajaxError には、例外が発生した場合にのみ渡される 4 番目のパラメーター throwError があります。
ajaxOptions を使用して、グローバル Ajax イベントを作成できます。
たとえば

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

$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("リクエスト中" o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url "リクエストが成功しました");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url "リクエストが失敗しました");
});

この例では、
このようにして、現在の ajax ステータスをグローバルな場所に簡単に表示できます。
もちろん、前に述べたように、3 番目のパラメーターは実際には ajax に渡されるパラメーターです。 get/post/load/getScript/getJSON などのメソッドは基本的に ajax メソッドを呼び出すため、ajaxOptions.url 属性は常に有効です。

他にもたくさんの例があります。
ajax で呼び出す場合は、カスタム パラメーターを渡すこともできます。次の例では、ajax 呼び出し
の msg パラメーターをカスタマイズしました。

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

//カスタムパラメータmsg
$.ajax({url:"test1.html",type:"get",msg:"page one"});
$.ajax({url:"test2.html",type:"get",msg:"ページ 2"});
$.ajax({url:"test3.html",type:"get",msg:"ページ 3"});
$.ajax({url:"test4.html",type:"get",msg:"ページ 4"});

//ここでカスタムパラメータmsgを取得できます。
//これは、さまざまな Ajax リクエストを異なる方法で処理するために使用できます。
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("リクエスト中" o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg "リクエストは成功しました");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg "リクエストが失敗しました");
});

最後に、load メソッドについて触れておきます。

get、post、getJSON などの他の単純な Ajax メソッド、そのコールバック関数はすべて成功コールバックで設定されています。

実際にはロード設定のみが完全なコールバックです。

したがって、load に設定されるコールバック関数には 2 つのパラメータが必要です。

XMLHttpRequest と textStatus
しかし、実際はそうではありません。
ロード コールバックには 3 つのパラメータがあります
XMLHttpRequest.responseText、textStatus、XMLHttpRequest
したがって、load のコールバックで
を実行できます。 textStatus=="success" または textStatus=="error" を使用して、呼び出しが成功したかどうかを判断します。
または、XMLHttpRequest.status 属性を使用して、200 か 404 かその他かを判断します。

この点では、通常の get/post メソッドよりも高度だと思います。各getの誤差を奇数に設定することはできません。ただし、グローバルな ajaxError を設定することは実際には良い選択です。