ホームページ > 記事 > ウェブフロントエンド > Ajaxグローバルイベントの参照方法と各イベントの実行順序(グローバル/ローカル)
Ajaxグローバルイベントの参照方法と各イベントの実行順序(グローバル/ローカル)
- 寻∝梦オリジナル
- 2018-09-10 14:42:381903ブラウズ
この記事では主にajaxのグローバルイベント参照方法と各イベントの実行順序を紹介します
jqueryのajaxメソッドの全グローバルイベント:
ajaxStart: ajaxの前リクエストの開始
ajaxSend: ajax リクエスト時
ajaxSuccess: ajax がデータを取得した後
ajaxComplete: ajax リクエストが完了した時
ajaxError: ajax リクエストにエラーが発生した後
ajaxStop: ajax リクエストが停止した後
ajaxメソッド グローバルイベントの有用性
$.ajax()、$.get()、$.load()、$.getJSON()などのjqueryのajaxメソッドを使用すると、グローバルイベントがデフォルトではトリガーされませんが、通常はバインド グローバル イベントはトリガーされませんが、実際には、これらのグローバル イベントは非常に便利です。
Ajax グローバル イベントには典型的なアプリケーション シナリオがあります。ページには複数または多数の Ajax リクエストがありますが、これらの Ajax リクエストは同じメッセージ メカニズムを持っています。 ajax リクエストが開始される前にプロンプト ボックスが表示され、「データの読み取り中」というプロンプトが表示されます。ajax リクエストが成功すると、プロンプト ボックスに「データ取得成功」と表示されます。グローバル イベントを使用しない方法は、beforeSend、success、および complete コールバック関数を $.ajax() に追加し、コールバック関数に処理プロンプト ボックスを追加することです。グローバルイベントの使い方は
$(document).ajaxStart(onStart)
.ajaxComplete(onComplete)
.ajaxSuccess(onSuccess);
function onStart(event) {
//.....
}
function onComplete(event, xhr, settings) {
//.....
}
function onSuccess(event, xhr, settings) {
//.....
}
jqueryでの各イベントの実行順序は以下の通りです
1.ajaxStart(グローバルイベント)
2.beforeSend(ローカルイベント)
3.ajaxSend(グローバルイベント)
4.success(ローカルイベント)
5.ajaxSuccess(グローバルイベント)
6.error(ローカルイベント)
7.ajaxError(グローバルイベント)
8.complete(ローカルイベント)
9.ajaxComplete (グローバル イベント)
10.ajaxStop (グローバル イベント)
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input type="button" value="点击触发ajax请求" id="ajaxReuqestID" />
<p id="ajaxStateID"></p>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(function() { //点击按钮，并执行ajax请求
$(document).ajaxStart(function() {
$("#ajaxStateID").append("ajaxStart" + "<br/>");
alert("ajaxStart");
}).ajaxSend(function() {
$("#ajaxStateID").append("ajaxSend" + "<br/>");
alert("ajaxSend");
}).ajaxSuccess(function() {
$("#ajaxStateID").append("ajaxSuccess" + "<br/>");
alert("ajaxSuccess");
}).ajaxError(function() {
$("#ajaxStateID").append("ajaxError" + "<br/>");
alert("ajaxError");
}).ajaxComplete(function() {
$("#ajaxStateID").append("ajaxComplete" + "<br/>");
alert("ajaxComplete");
}).ajaxStop(function() {
$("#ajaxStateID").append("ajaxStop" + "<br/>");
alert("ajaxStop");
});
$("#ajaxReuqestID").click(function() {
$.ajax({
url: "server/ajaxtxt.txt",
global: true,
beforeSend: function() {
$("#ajaxStateID").append("berforeSend" + "<br/>");
alert("berforeSend");
},
success: function() {
$("#ajaxStateID").append("success" + "<br/>");
alert("success");
},
error: function() {
$("#ajaxStateID").append("error" + "<br/>");
alert("error");
},
complete: function() {
$("#ajaxStateID").append("complete" + "<br/>");
alert("complete");
}
});
});
});
</script>
</body>
</html>
以上がAjaxグローバルイベントの参照方法と各イベントの実行順序(グローバル/ローカル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。