Introduction détaillée aux événements dans jQuery Ajax_jquery

Ajax déclenche de nombreux événements.
Il existe deux types d'événements, l'un est un événement local et l'autre est un événement mondial :
Événements locaux : appelés et alloués via $.ajax.

Copier le code Le code est le suivant :

$.ajax({
avantEnvoyer : fonction(){
// Gérer l'événement beforeSend
},
Complet : fonction(){
// Gérer l'événement complet
>
// ...
});

Les événements globaux peuvent être liés à l'aide de bind et unbind peut être utilisé pour dissocier. Ceci est similaire à click/mousedown/keyup et à d’autres événements. Mais il peut être transmis à chaque élément du DOM.

Copier le code Le code est le suivant :

$("#loading").bind("ajaxSend", function(){ //Utiliser bind
$(this).show();
}).ajaxComplete(function(){ //Utiliser ajaxComplete directement
$(this).hide();
});

Bien sûr, si vous ne souhaitez pas qu'un événement global soit généré pour une certaine requête Ajax, vous pouvez définir global:false

Copier le code Le code est le suivant :

$.ajax({
URL : "test.html",
global : faux,
// ...
});

La séquence des événements est la suivante :

Événement mondial ajaxStart
Démarre une nouvelle requête Ajax et aucune autre requête Ajax n'est en cours pour le moment.
avantEnvoyer l'événement local
Déclenché lorsqu'une requête Ajax démarre. Vous pouvez définir l'objet XHR ici si nécessaire.
ajaxSend événement mondial
Événement global déclenché avant le début de la requête
réussite événement local
Déclenché lorsque la demande aboutit. Autrement dit, le serveur ne renvoie pas d'erreur et les données renvoyées ne contiennent aucune erreur.
Événement mondial ajaxSuccess
Demande globale réussie
erreur événement local
Déclenché uniquement lorsqu'une erreur se produit. Vous ne pouvez pas exécuter simultanément les fonctions de rappel de réussite et d’erreur.
Événement global ajaxError
Déclenché globalement lorsqu'une erreur se produit
événement local complet
Que votre demande réussisse ou échoue, même s'il s'agit d'une demande synchrone, vous pouvez déclencher cet événement lorsque la demande est terminée.
ajaxÉvénement mondial complet
Déclenché lorsque la requête globale est terminée
Événement mondial ajaxStop
Se déclenche lorsqu'aucun Ajax n'est en cours.

Les paramètres des rappels d'événements locaux sont clairement écrits dans la documentation, je n'entrerai donc pas dans les détails ici.

Dans l'événement global, à l'exception de ajaxStart et ajaxStop, les autres événements ont 3 paramètres
événement, XMLHttpRequest, ajaxOptions
Le premier est un événement, le deuxième est un objet XHR et le troisième paramètre est le plus utile, c'est le paramètre lors de l'appel de cet ajax.
Pour ajaxError, il existe un quatrième paramètre, throwError, qui ne sera transmis que lorsqu'une exception se produit.
Nous pouvons utiliser ajaxOptions pour écrire un événement ajax global.
Par exemple

Copier le code Le code est le suivant :

$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Demande" o.url);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.url "Demande réussie");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.url "La demande a échoué");
});

Pour cet exemple,
De cette façon, nous pouvons facilement afficher l’état actuel de l’Ajax quelque part dans le monde.
Bien entendu, comme mentionné précédemment, le troisième paramètre est en fait le paramètre transmis à ajax. Les méthodes telles que get/post/load/getScript/getJSON appellent essentiellement des méthodes ajax, donc l'attribut ajaxOptions.url est toujours valide.

Il existe de nombreux autres exemples.
Si vous appelez avec ajax, vous pouvez également transmettre des paramètres personnalisés. Dans l'exemple suivant, j'ai personnalisé un paramètre msg pour l'appel ajax

Copier le code Le code est le suivant :

//Message de paramètre personnalisé
$.ajax({url:"test1.html",type:"get",msg:"page one"});
$.ajax({url:"test2.html",type:"get",msg:"Page 2"});
$.ajax({url:"test3.html",type:"get",msg:"page trois"});
$.ajax({url:"test4.html",type:"get",msg:"Page 4"});

//Ici, vous pouvez obtenir le paramètre personnalisé msg.
// Cela peut être utilisé pour traiter différemment différentes requêtes ajax.
$("#msg").beforeSend(function(e,xhr,o) {
$(this).html("Demande" o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg "Demande réussie");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg "La demande a échoué");
});

Enfin, il y a quelque chose à dire sur la méthode de chargement.

D'autres méthodes ajax simples, telles que get, post, getJSON, etc., leurs fonctions de rappel sont toutes définies avec des rappels réussis.

Et seul le paramètre de chargement est en fait le rappel complet.

Ainsi, la fonction de rappel définie dans load doit avoir 2 paramètres.

XMLHttpRequest et textStatus
Mais ce n’est pas réellement le cas.
Le rappel de chargement a trois paramètres
XMLHttpRequest.responseText, textStatus, XMLHttpRequest
Donc, vous pouvez
dans le rappel de load Utilisez textStatus=="success" ou textStatus=="error" pour déterminer si l'appel a réussi.
Ou utilisez l'attribut XMLHttpRequest.status pour déterminer s'il s'agit de 200 ou 404 ou autre chose.

À cet égard, je pense que c'est plus avancé que les méthodes get/post ordinaires. Il est impossible de définir l'erreur de chaque résultat en nombres impairs. Mais définir une ajaxError globale est en fait un bon choix.