JavaScript : JSON, AJAX et les requêtes asynchrones

Définir une requête précise

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec l'asynchrone, vous câblerez toute la logique qui suit l'appel. Puis, vous devrez décider quoi faire par l'intermédiaire d'un callback.
04:20

Transcription

Pourquoi ça a fonctionné avec du synchrone et pas avec de l'asynchrone ? Tout simplement parce que tout est question de « callback ». Et oui, je vous l'ai dit à un moment, on va devoir utiliser des fonctions retour, les « callbacks » on appelle ça. Regardez, on va prendre un autre exemple, un petit peu plus bas dans la même page. Ici, on vous montre qu'on va pouvoir câbler une fonction, qui va être une fonction anonyme, elle n'est pas nommée, il n'y a pas de nom, qui va se charger de vérifier, ici, le statut de la réponse et on va le placer sur l'objet de requête, sur une propriété qui s'appelle « onreadystatechange ». Ça veut dire, quand le statut change et que la requête devient disponible, eh bien, à ce moment-là, cette fonction va être levée et elle va interagir. Alors, pourquoi ça ne marchait pas de façon synchrone ? Tout simplement parce qu'on demande tout de suite, ici, la réponse, alors que si je le mets en asynchrone, je ne peux pas avoir cette réponse-là tout de suite parce que je ne sais pas encore quand le serveur va me répondre. Ça veut dire que à cet endroit-là, ce n'est pas terminé, la résolution n'est pas terminée, je n'ai pas encore reçu les informations quand je suis en mode asynchrone. Asynchrone, c'est : ça se joue, ça ne bloque pas, et puis, quand c'est terminé, ça se lève. Donc là, on va simplement, vous voyez, récupérer toute cette partie-là, et puis, on va la placer à cet endroit-là et là on va travailler, on va mettre en place, comme vous pouvez le voir ici, on va mettre en place une attente, une fonction anonyme qui va interagir, et qui va en fait, être levée quand la réponse sera disponible, quand le serveur aura fini de répondre. Alors, vous ferez attention, parce qu'il faut câbler toute une logique. « if this readyState » est égal, égal, égal à « XMLHttpRequest.DONE », « DONE », ça veut dire que c'est 4, donc là on peut aussi mettre directement, comme ça, 4, « this.status==200 », ça veut dire le status de la réponse est OK, alors on va recevoir la bonne réponse et on va y récupérer. « this », dans ce contexte-là, c'est la requête HTTP. Enfin non, c'est « XMLHttpRequest », donc vous pouvez utiliser comme ça le « this » à l'intérieur de la fonction pour faire des choses et pour travailler. Ça, ça va fonctionner parce qu'ici, on envoie, et quand on a terminé, on va recevoir. Par contre, attention, il faut bien qu'on ait le « send » comme ça, et je vous conseille aussi de faire comme eux, c'est-à-dire de placer votre fonction anonyme au-dessus de tous ces appels-là. Vous voyez que ça, on va le câbler directement, donc cette fonction anonyme va être câbler ici, donc juste en-dessous de la définition de notre objet de requête, et va être attachée à la propriété « Quand tu as terminé ta requête et que ton status change à 'ready', à ce moment-là, tu nous fais quelque chose et tu nous donnes la réponse. » Maintenant qu'on a ça, on va enregistrer cette partie et on va retourner dans le navigateur et on va recharger. On va se placer en « console ». On voit qu'effectivement, ça a fonctionné, il n'y a pas de problèmes, et ça n'a pas bloqué la page, c'est un petit « appel », mais vous le verriez mieux si c'était un gros « appel » avec beaucoup de données, donc la page pourrait continuer à charger, à faire sa vie, même l'utilisateur d'ailleurs, et quand on aura reçu la réponse, hop, ça va s'afficher, ça fera ce qu'on lui demande de faire dans la « callback ». Là, vous pouvez faire tout ce que vous voulez, si j'ai envie, ici, de faire un « alert », je peux tout à fait le faire, il n'y a aucun problème avec ça, par exemple, je peux faire, ici, Ici, « .alert », voilà, et puis je vais mettre une « alert » avec la réponse à l'intérieur et sans aucun problème, ça va fonctionner. Vous pouvez, en fait, faire tout ce que vous voulez, travailler l'objet, récupérer les infos et travailler aussi, vraiment, là, c'est vous qui voyez, c'est vos comportements dans la « callback » que vous allez câbler. C'est pas, ici, une obligation de faire un « consol.log », on pourrait renvoyer sur une autre fonction qui va traiter les données et qui va faire des choses. Là, vous avez vu comment on met en place un appel asynchrone, là, je ne suis pas en synchrone, je suis bien en asynchrone, donc je dois câbler une fonction « callback » pour faire quelque chose une fois que le status de la requête a changé. Vous serez obligé de le faire tout le temps si vous utilisez « XMLHttpRequest », c'est obligatoire. Vous voyez que c'est très verbeux, pour le coup, très très verbeux. Il faut démarrer, câbler une fonction de retour, ouvrir l'appel, et l'envoyer. Si on doit le faire à chaque fois, ce n'est pas évident. C'est pour ça que les librairies Ajax sont extrêmement utiles.

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 !