jQuery のイベントの詳細な紹介 Ajax_jquery-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:03:46

オリジナル

1157 人が閲覧しました

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 を設定することは実際には良い選択です。