Ajaxグローバルイベントの参照方法と各イベントの実行順序(グローバル/ローカル)

この記事では主に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 (グローバル イベント)

例

nbsp;html>


	
		<meta>
	

	
		<input>
		<p></p>
		<script></script>
		<script>
			$(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>
	

以上がAjaxグローバルイベントの参照方法と各イベントの実行順序(グローバル/ローカル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。