JavaScript : JSON, AJAX et les requêtes asynchrones

Mettre en place un appel asynchrone

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec l'objet de requête, vous allez mettre en place un appel vers JSON. Ainsi, vous pourrez le récupérer dans la page, mais de manière synchrone à ce stade.
06:34

Transcription

Pour utiliser cet objet « XMLHttpRequest » ce que je vous conseille c'est de vous rendre sur la documentation de la Mozilla Developper Network qui, finalement, est la LA fondation qui permet d'avoir beaucoup de ressources sur beaucoup de sujets pour le Web et ça, c'est gratuit, c'est libre et ouvert. N'hésitez pas à aller sur ce site pour n'importe quel sujet pour le Web, en tout cas, ici, pour « XMLHttpRequest » c'est une des meilleures documentations qui existe. Comment on va mettre en place en appel ? On va vous montrer un exemple très simple. D'abord, on va se préparer. Ça veut dire quoi ? Ici on a, vous vous souvenez, notre exercice, notre serveur Web qui est lancé. Sur notre serveur Web on a posé à la racine du serveur, ici, notre « user.json ». Cela veut dire que, concrètement, si on fait « /user.json », on devrait récupérer notre fichier. Effectivement, j'ai effectué une requête sur le serveur. Comment je sais que c'est une requête je vais aller dans le « Network », ici et je me rends bien compte que j'ai demandé au serveur de me fournir un fichier, donc j'ai un « nPoint » point final sur le serveur, le serveur m'a répondu et si je regarde la réponse effectivement, je l'ai demandé en « get » et j'ai une réponse 200 pour me dire que ça existait. Le cas ne serait pas le même si j'avais fait « users.json » qui donc est une ressource qui n'existe pas : « 404 Not Found ». Là, en l'occurrence, c'est bien le serveur qui m'a répondu avec un statut 200 et qui m'a permis de récupérer ce fichier. Ici, vous avez l'information de comment effectuer votre requête. Il va falloir utiliser l'objet « XMLHttpRequest » pour appeler notre serveur et pour récupérer le fichier. Après, on fera un « console.log » pour voir ce que ça donne. On va rester sur notre page. On connait le« nPoint », on va le copier un peu plus tard. On va rester sur notre page. Pour le moment, notre page ne fait rien. On va fermer le Wikipedia et on va ici récupérer toute cette partie-là, c'est ce qui va nous intéresser. Ne prenez pas le « const », on va utiliser une « var » très simple. Dans notre « index.html », on va ouvrir et fermer une balise « script » et, ici, on va coller l'exemple de chez Mozilla. On va le modifier un peu mais on va d'abord l'expliquer. La première des choses est de créer une variable « request ». Cette variable va démarrer l'objet « XMLHttpRequest ». Cet objet est toujours disponible, il fait partie de la norme Javascript. Si vous voulez le vérifier, vous pouvez simplement taper « XMLHttpRequest », il fauda mettre un « new » devant sinon vous aurez une erreur. Vous verrez qu'en instanciant un nouvel objet « XMLHttpRequest » on se retrouve avec un objet qui comporte énormément d'informations et qui est en attente. C'est-à-dire qu'on ne fait rien avec l'objet « XMLHttpRequest », pour le moment, il est en attente. Ici, à cette ligne 12, il est en attente. On va lui demander, via son API avec la méthode « open », d'aller ouvrir une URL. En l'occurrence, on vous donne plusieurs informations. Quand vous allez faire « open », ici, que voulez-vous faire ? Un « get », un « post », un « put » un « delete » ? C'est à vous de voir. Ici, c'est le verbe que vous allez utiliser. Si vous ne connaissez pas les verbes, je vous conseille d'aller regarder les « verb rest » qui vous permettront d'avoir plus d'informations sur les verbes et qui vous permettront de savoir de quoi on parle. « Verb rest apache », par exemple. On en a d'autre « verb rest web » et là ça va me permettre d'avoir toutes les méthodes. En fait, ce ne sont que les méthodes « http ». Si vous regardez bien ici, ce sont les méthodes « http » qui sont utilisées donc c'est « post » « get » « put » « patch » « delete » qui sont les méthodes les plus connues, les plus utilisées la plupart du temps. Vous le trouverez facilement sur Internet. « get » vous permet de récupérer, « post » vous permet de publier, « put » vous permet de mettre à jour, « delete » vous permet de supprimer. Ici, on va utiliser « get » pour récupérer la ressource et on va lui dire, ici, quelle est l'URL sur laquelle chercher cela. C'est l'URL qu'on a ici, qu'on va copier et coller à cet endroit et c'est « user.json », notre fichier « user.json ». L'idée d'une requête asynchrone c'est aussi d'être jouée dans le navigateur sans recharger la page. C'est à ça que va servir cet objet. « false » qu'on a là, c'est pour lui dire je ne veux pas que ce soit fait en asynchrone. C'est une mauvaise idée car, ici, ça nous permet de le faire mais nous, on veut de l'asynchrone donc on va enlever le « flag » « false ». Ensuite, on va lui dire qu'on ne veut rien envoyer, donc « null », on n'envoie pas de données dans le cadre de la soumission d'un formulaire, par contre, on envoie de la donnée. Donc « null », ici. Et là on va faire un « if », si le statut de la requête, c'est du 200 dans ce cas, on va dire « réponse reçue » et on va récupérer « responseText » qui se trouvera sur « req », vous voyez que c'est un peu verbeux. Sinon, on va lui dire que le statut n'est pas bon et on va venir récupérer des infos et on va les afficher. Le statut de la réponse : 200, 404, 500 et puis le « statusText » qui sera généralement l'erreur sur la page. On va enregistrer ça, on va retourner sur notre exercice et on va recharger. Ici, on voit « status de la réponse : 0 » On n'a rien reçu, on va aller dans le « network », on va voir qu'effectivement, ici, on a bien appelé, on a bien reçu de l'information mais on a un statut 0, pourquoi ? Parce qu'il nous a envoyé un « 304 Not Modified ». Bien sûr, ça a fonctionné. Sur leur exemple, ils ne donnent pas toutes les informations mais on voit que ça a fonctionné et qu'on a bien reçu de l'information. Si je le fais ici avec « false », je vais avoir une requête qui va être synchrone et ça va fonctionner de la même manière sauf que ma page va attendre quelque chose donc, là, par contre, je vais bien récupérer l'information et je vais, ici, avoir en information la réponse de ma requête et qu'est-ce que ça va être ? Mon texte, ni plus ni moins, c'est mon texte. Si je vais ici, je vois bien que j'ai un statut 200, j'ai bien reçu mon information et elle s'est affichée dans le navigateur. Vous voyez que, rien qu'avec une petite ligne, on peut effectuer une requête. Il faut savoir que vous avez la possibilité, au travers de cet objet, d'envoyer de l'info et on va voir que c'est possible de le faire, on peut envoyer de l'information au travers de cet objet-là. Cela ne va pas être la meilleure des manières de le faire directement avec l'objet « XMLHttpRequest » parce qu'il y a des « librairies » qui sont beaucoup plus sympa à utiliser mais on va voir ensemble ce qu'on peut envoyer dans ce paquet-là et vous allez voir aussi que, si on enlève le « flag » « false » qu'on a là, il va falloir qu'on définisse plus précisément le retour. Vous allez comprendre après. Vous avez vu que ça a fonctionné quand je l'ai mis en synchrone parce que je fais un appel, la requête se joue et je reçois la réponse. Par contre, ça bloque ma page. Je ne veux pas ça. On va voir comment on fait.

JavaScript : JSON, AJAX et les requêtes asynchrones

Découvrez les requêtes asynchrones en Javascript avec le format JSON et la norme AJAX. Assimilez les techniques du développement d’applications web en single-page.

2h03 (30 vidéos)
Aucun commentaire n´est disponible actuellement

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !