Ajaxグローバルイベントの参照方法と各イベントの実行順序(グローバル/ローカル)-jsチュートリアル-php.cn

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

寻∝梦

リリース： 2018-09-10 14:42:38

オリジナル

1947 人が閲覧しました

この記事では主に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 サイトの他の関連記事を参照してください。