Maison > Article > interface Web > Méthode de référence d'événement globale Ajax et ordre d'exécution de chaque événement (global/local)

Méthode de référence d'événement globale Ajax et ordre d'exécution de chaque événement (global/local)

寻∝梦original: 2018-09-10 14:42:381903parcourir

Cet article présente principalement la méthode de référence d'événement globale d'ajax et l'ordre d'exécution de chaque événement. Lisons maintenant cet article ensemble

Tous. événements globaux de la méthode ajax de jquery :

ajaxStart : avant le début de la requête ajax

ajaxSend : lorsque la requête ajax est effectuée

ajaxSuccess : ajax après obtenir les données

ajaxComplete : lorsque la requête ajax est terminée

ajaxError : après qu'une erreur se produit dans la requête ajax

ajaxStop : après l'arrêt de la requête ajax

Global de la méthode ajax L'utilisation des événements

Lorsque vous utilisez la méthode ajax de jquery, que ce soit $.ajax(), $.get(), $.load(), $.getJSON( ), etc., les événements globaux seront déclenchés par défaut. Les événements globaux ne sont généralement pas liés, mais en fait ces événements globaux sont très utiles.

L'événement global Ajax a un scénario d'application typique : votre page contient plusieurs, voire un grand nombre de requêtes ajax, mais ces requêtes ajax ont le même mécanisme de message. Une boîte d'invite s'affiche avant le début de la requête ajax, demandant « Lecture des données » ; lorsque la requête ajax est réussie, la boîte d'invite affiche « Acquisition de données réussie » une fois la requête ajax terminée, la boîte d'invite est masquée. La façon de ne pas utiliser d'événements globaux est d'ajouter les fonctions de rappel beforeSend, success et complete à $.ajax(), et d'ajouter une boîte d'invite de traitement dans la fonction de rappel. La façon d'utiliser les événements globaux est la suivante :

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

L'ordre d'exécution de chaque événement dans jquery est le suivant

1.ajaxStart (événement global)

2.beforeSend (événement local)

3.ajaxSend (événement mondial)

4.success (événement local)

5.ajaxSuccess (événement mondial)

6 .error (événement local)

7.ajaxError (événement mondial)

8.complete (événement local)

9.ajaxComplete (événement mondial)

10.ajaxStop (Événements mondiaux)

Exemple

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JavaScript calcule la distance entre deux lieux par latitude et longitudeArticle suivant：JavaScript calcule la distance entre deux lieux par latitude et longitude

Articles Liés

Voir plus