La stratégie avancée de XMLHttpRequest et AJAX

Et on continue ensemble les cours consacrés à l’utilisation de l’objet XMLHttpRequest avec la technologie AJAX.

C’est parti pour utiliser les paramètres avancés de XMLHttpRequest.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La stratégie avancée de XMLHttpRequest et AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Dans le cours précédent, vous avez commencé à découvrir l’objet XMLHttpRequest, et là on va directement au niveau supérieur en découvrant les fonctions avancées de XMLHttpRequest, cet objet, je ne vais pas dire magique, mais cet objet fabuleux qui va vous servir à créer vos sites web Ajax.

Propriétés XMLHttpRequest détaillées

Les propriétés de l’objet XMLHttpRequest détaillées, vous avez la propriété readyState que vous connaissez, qui permet de connaître l’évolution de la requête, l’évolution de la requête elle prend successivement 5 valeurs,
au début c’est 0 pour initialiser, la requête n’est pas initialisée,
ensuite valeur 1 ou loading, c’est le début du transfert des données.
2 ou loaded, les données sont chargées, sont transférées,
3 ou interactive les données sont reçues, sont partiellement accessible dans la page HTML,
et 4 les données sont complètement accessibles, donc vous pouvez les d’afficher dans votre page HTML.
En principe avec Ajax, on attend de recevoir la valeur 4 car c’est la plus importante, 4 ou complete les données transférées peuvent alors être traitées avec JavaScript et ensuite grâce au DOM, les afficher dans votre page HTML.

L’accès à la propriété readyState, s’effectue par l’événement onreadystatechange, vous allez écouter cet événement JavaScript et ensuite vous allez l’associer à une fonction, ça va vous permettre de connaître la valeur prise par readyState.

Un petit exemple de code source, je passe le départ pour la création de l’objet, vous connaissez, vous l’avez vu dans le cours précédent, si vous ne l’avez pas vu, je vous renvoie au cours précédent, vous écoutez l’événement, oXhr.readyState, sur l’objet XMLHttpRequest, dès qu’il y a l’élément ready, on readystatechange, vous faites un test, est-ce que l’objet oXhr for Ready State, est-ce que la propriété ready state est égale à 4, si oui vous allez récupérer les données qui proviennent du serveur.
Bien évidemment pensez à faire un open et un send pour récupérer les données qui sont sur le serveur.

Vous avez également la propriété status qui renvoie le code http qui indique le résultat de la dernière requête effectuée, très important pour afficher les données reçues par le serveur dans votre page html.
200 la requête a été exécutée avec succès, c’est génial tout va bien,
403 c’est un accès interdit,
erreur 404, la fameuse erreur 404, fichier non trouvé,
500 c’est une erreur interne au serveur.

Je vous ai mis les principales erreurs que vous pourrez avoir, je vous ai mis une URL avec la liste complète des erreurs, je vous remettrai l’URL directement sous ce cours vidéo.

La propriété responseText ça contient la réponse de la requête sous form de chaine de caractères, le contenu de votre fichier txt, par exemple, la propriété responseXml ça renvoie les données comme un objet document XML, le contenu de votre fichier XML et vous pourrez l’examiner avec JavaScript et l’analyser selon les méthodes et les propriétés du DOM.

Exemple d’application

On passe ensemble au code source pour vous montrer un peu une démonstration de tout ça, vous allez charger un fichier texte, un fichier XML et l’afficher ici. Le fichier texte et le fichier XML il est ici, qu’est-ce qu’on fait ?
On donne une URL en paramètre d’entrée, c’est une fonction si vous ne savez utiliser les fonctions JavaScript, j’ai créé un cours gratuit sur les fonctions JavaScript, si vous suivez la formation gratuite JavaScript professionnelle, vous avez dû recevoir ce cours, ou alors vous le recevrez dans les prochaines semaines, sinon, inscrivez-vous pour suivre la formation JavaScript professionnelle, elle est gratuite, et elle part du niveau débutant jusqu’au niveau professionnel.

Vous appelez la fonction getOxhr en transmettant soit le fichier txt, soit le fichier XML. Et dans cette fonction qu’est-ce qu’on fait ?
On créé, maintenant vous savez, créer l’objet XMLHttpRequest, on met un peu de log, j’ai également créé un cours gratuit pour effectuer du log, du debug avec JavaScript, HTML, PHP, tout est dans la formation gratuite JavaScript professionnelle, et ensuite on écoute l’événement readyStanteChips, et donc on test la propriété readyState et à chaque fois, on affiche la progression de l’état de la requête, et dès qu’on a reçu la valeur status avec readyState = 4, le fichier est récupéré, on affiche son contenu, regardez bien ici, on a mis 209 millisecondes à charger le fichier texte et à l’afficher, pour le fichier XML, 113 millisecondes, le fichier XML s’est chargé beaucoup plus rapidement vous voyez que c’est le contenu d’un fichier XML, le fichier texte a changé, et à chaque fois la progression du statut, de l’événement onReadyStatechange.

Votre plan d’action !

Alors comme je vous l’ai dit, la connaissance de l’objet XMLHttpRequest est indispensable avec Ajax, si vous avez des questions, posez-les directement sous ce cours vidéo et moi je à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple AJAX

Et voici le code source commenté avec XMLhttpRequest.

Cliquez ici pour consulter la liste complète des erreurs que vous pouvez recevoir.

Choisissez les prochains cours dédiés à la technologie AJAX

Utilisez la zone commentaires, pour me soumettre les cours que vous souhaitez sur la technologie AJAX.