11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] XMLHttpRequest onreadystatechange ou onload?

Bonjour à tous
Dans les requête AJAX, j'utilise l'événement "onreadystatechange", mais j'ai vu que d'autres développeurs utilisent "onload".
A la lecture de la documentation, je ne comprends pas très bien la différence, si ce n'est que "onload" n'est pas supporté par les anciennes versions de navigateur, mais dans le cas qui m'intéresse je n'ai besoin que de supporter les versions en cours de FF et Chrome.
Pouvez vous me donner une explication?
Merci de votre aide
Modifié par PapyJP (05 Mar 2018 - 11:40)
Hello !

onreadystatechange est déclenché à chaque changement d'état d'une requête AJAX (envoi en cours, requête envoyée, réception en cours de la réponse, réponse reçue) et te permet donc de suivre plus précisément le déroulement de ta requête (et pourquoi pas le montrer à l'utilisateur). De plus, si la requête échoue, tu sauras aussi à quel moment il y a eu un problème, ce qui est très avantageux lorsqu'on debug.

Personnellement, je préfère utiliser onload pour des requêtes courtes, où la progression n'a pas besoin d'être montrée à l'utilisateur. Sinon, pour des tâches plus longues, comme un upload de fichier par exemple, onreadystatechange te permettra de fournir une barre de progression à l'utilisateur (ce n'est qu'un exemple parmi d'autres).
Meilleure solution
Modérateur
Pardon Guillaume mais c'est assez faux comme réponse.

onreadystatechange s'occupe des changements d'états dans le temps de la requête (ce dont on s'en fiche dans 99% des cas), ce qui fait que généralement on teste l'état final (state 4) puis on teste différente chose comme le code http pour comprendre ce qu'il s'est passé. Ce qui donne un code assez peu lisible, les évènements dédiés sont bien plus pratiques, précis et lisibles:

onload: pour réagir à une requête terminée avec succès.
onerror: pour réagir à une requête terminée avec erreur.
onabort: pour réagir à une requête annulée par la méthode abort()
ontimeout: pour réagir à une requête en timeout

Ces évènements sont exclusifs, un seul sera appelé lors de chaque requête. Pour réagir à la fin indifféremment du succès de la requête on utilise:

onloadend: c'est un peu l'équivalent du readyState == 4, mais n'est pas déclenché pour les timeout.

sinon il y a encore:

onprogress: pour afficher la progression d'un téléchargement (ce que onreadystatechange ne permet pas de faire)
onloadstart: début de la requête

Le seul intérêt restant de onreadystatechange est de récupérer les en-têtes de la réponse avant d'avoir récupéré le body. Ce qui est un cas assez spécifique.

Par conte JP, si tu as l'habitude et que ça fonctionne, il n'y a pas de raison impérative d'en changer non plus Smiley smile
Modifié par kustolovic (05 Mar 2018 - 15:15)
Je voulais simplement comprendre ce dont il s'agissait. Je pense que je ne cais rien changer à mon code.
GuillaumeBauer a écrit :
Hello !
Sinon, pour des tâches plus longues, comme un upload de fichier par exemple, onreadystatechange te permettra de fournir une barre de progression à l'utilisateur (ce n'est qu'un exemple parmi d'autres).


ce n'est pas plutôt l'écoute de l'événement 'progress' sur l'objet 'upload' attaché à l'objet xhr créé pour la requête qui fait cela (hors de l'écoute du onreadystatechange??


// écoute evt  pour barre de progression
xhrObject.upload.addEventListener('progress', function(e) { 
   code ...  etc ...
}
Sujet clos
Aller à