Globale Ajax-Ereignisreferenzmethode und die Ausführungsreihenfolge jedes Ereignisses (global/lokal)-js-Tutorial-php.cn

Globale Ajax-Ereignisreferenzmethode und die Ausführungsreihenfolge jedes Ereignisses (global/lokal)

寻∝梦

Freigeben： 2018-09-10 14:42:38

Original

1919 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die globale Ereignisreferenzmethode von Ajax und die Ausführungsreihenfolge jedes Ereignisses vor

Alle globale Ereignisse der Ajax-Methode von jquery:

ajaxStart: bevor die Ajax-Anfrage beginnt

ajaxSend: wenn die Ajax-Anfrage gestellt wird

ajaxSuccess: ajax After Daten abrufen

ajaxComplete: Wenn die Ajax-Anfrage abgeschlossen ist

ajaxError: Nachdem in der Ajax-Anfrage ein Fehler aufgetreten ist

ajaxStop: Nachdem die Ajax-Anfrage gestoppt wurde

Globale Verwendung von Ereignissen durch die Ajax-Methode

Wenn Sie die Ajax-Methode von jquery verwenden, unabhängig davon, ob es sich um $.ajax(), $.get(), $.load(), $.getJSON() handelt usw., globale Ereignisse werden standardmäßig ausgelöst. Globale Ereignisse sind normalerweise nicht gebunden, aber tatsächlich sind diese globalen Ereignisse sehr nützlich.

Das globale Ajax-Ereignis hat ein typisches Anwendungsszenario: Ihre Seite hat mehrere oder sogar eine große Anzahl von Ajax-Anfragen, aber diese Ajax-Anfragen haben den gleichen Nachrichtenmechanismus. Vor dem Start der Ajax-Anfrage wird ein Eingabeaufforderungsfeld mit der Aufforderung „Daten werden gelesen“ angezeigt. Wenn die Ajax-Anfrage erfolgreich ist, wird im Eingabeaufforderungsfeld „Datenerfassung erfolgreich“ angezeigt. Die Möglichkeit, keine globalen Ereignisse zu verwenden, besteht darin, die Callback-Funktionen beforeSend, success und Complete zu $.ajax() hinzuzufügen und in der Callback-Funktion ein Eingabeaufforderungsfeld für die Verarbeitung hinzuzufügen. Die Art und Weise, globale Ereignisse zu verwenden, ist:

$(document).ajaxStart(onStart)
   .ajaxComplete(onComplete)
   .ajaxSuccess(onSuccess);
function onStart(event) {
	//.....
}
function onComplete(event, xhr, settings) {
	//.....
}
function onSuccess(event, xhr, settings) {
	//.....
}

Nach dem Login kopieren

Die Ausführungsreihenfolge jedes Ereignisses in jquery ist wie folgt

1.ajaxStart (globales Ereignis)

2.beforeSend (lokal Ereignis)

3.ajaxSend (globales Ereignis)

4.success (lokales Ereignis)

5.ajaxSuccess (globales Ereignis)

6.error (lokales Ereignis)

7.ajaxError (globales Ereignis)

8.complete (lokales Ereignis)

9.ajaxComplete (globales Ereignis)

10 .ajaxStop (globales Ereignis)

Beispiel

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonGlobale Ajax-Ereignisreferenzmethode und die Ausführungsreihenfolge jedes Ereignisses (global/lokal). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!