Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

JavaScript : JSON, AJAX et les requêtes asynchrones

Découvrir les librairies les plus répandues

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, partez à la découverte des nombreuses librairies permettant de traiter des requêtes Ajax.
04:45

Transcription

Alors, en termes de librairies, nous ne sommes pas en reste, il existe énormément de librairies qui permettent de faire de l'Ajax. Alors Ajax est simplement de l'asynchrone, des requêtes asynchrones, on va y venir après, puisqu'on verra comment on le met en place à la main, vous verrez que c'est pas une mince affaire, à la main. Bien sûr, il y a plein plein plein de librairies qui existent. Alors nous, on se basera sur Ajax de jQuery qui est du coup, un appel sur la librairie Ajax, pour le coup c'est une fonction implémentée dans la librairie jQuery, mais pour le coup, ça fait partie de jQuery, donc c'est Ajax dans jQuery. Faudra pas confondre ce que c'est que vraiment Ajax et le Ajax de jQuery qui est vraiment pour le coup ici une fonction qu'on va utiliser. Bien sûr, il en est existe énormément. On a notamment le très bon client HTTP qui est disponible dans Angular2, qui vous permet de faire de la requête Ajax asynchrone, donc des requêtes vers des serveurs, et qui permet du coup de récupérer des réponses une fois que c'est terminé. Alors, il y a des petits exemples qui sont très sympas, qui sont proposés, où on va utiliser un service qui va aller faire une requête, et on va souscrire à ce service, et là, on va parler d'« observable », c'est des choses un petit peu plus complexes que ce qu'on va voir ensemble, mais sachez que voilà, Angular propose également son client pour faire des requêtes « Ajax». Après, on a tout un tas de librairies qui existent, notamment par exemple, on a pour « react » et « react-fetch » qui permet effectivement lui aussi de faire des requêtes, et donc de définir en fait des « fetch » avec des « URL » qui vont être en fait des « endpoint », des point finaux sur lesquels on va venir se câbler, on va donc récupérer de la donnée, et quand on aura récupéré ces données, on fera quelque chose avec, c'est le principe même d'Ajax, on va faire une requête, et attendre que le serveur nous réponde, et quand le serveur nous aura répondu, on va pouvoir traiter les données et faire quelque chose. Donc pour « react », ça existe, après, si vous avez besoin de travailler ici notamment, c'est très très très porté vers notre « js », mais pour notre « js », il y a également une librairie qui s'appelle « request » qui permet du coup, de faire des appels et d'attendre une réponse, et de faire des choses une fois que c'est terminé avec une fonction « Callback », c'est-à-dire une fonction d'appel qui est définie en deuxième paramètre, qui permet ensuite de récupérer la réponse et de faire quelque chose avec. Ce sera à peu près toujours le même principe. On appelle, on attend, et qu'est-ce qu'on fait après ? A chaque fois qu'on va utiliser une librairie qui fait de l'Ajax, on vous demandera de mettre une fonction de « Callback » qui permettra de donner une information au programme de ce qu'il doit faire avec la donnée qui revient, et qui nous permettra surtout de savoir si tout s'est bien déroulé, on a bien un statut de 100, on n'a pas d'erreur sur le serveur, voilà, c'est vraiment toutes ces choses-là que l'on va récupérer qui vont nous permettre de travailler ensuite avec la réponse proposée par le serveur, qui sera en retour de notre requête. On a également des petites librairies sympas que vous pouvez aller regarder, « aja.js » qui est pas trop mal aussi, qui permet de faire de la requête assez simplement avec une « API » assez propre, sur laquelle on va définir l'« URL » vers laquelle on veut taper, et puis on va ensuite pouvoir récupérer l'information, puisqu'on a un « .on » que l'on peut câbler juste après l'appel, et qui nous permettra de récupérer la donnée, et de dire surtout qu'est-ce qu'on fait par exemple quand ça s'est bien passé, ou quand ça s'est mal passé. Donc là, on a possibilité de faire pas mal de choses, de définir des « headers », définir des temps de « timeout » si ça met trop longtemps, etc. On a également une petite librairie qui s'appelle « eldarion-ajax », qui est pas trop mal, qui permet effectivement aussi de venir câbler des informations, et là, ce qui est pas mal, c'est que vous allez le faire directement dans les éléments HTML, vous allez donner le « href » vers ce que vous voulez, et puis ensuite, vous allez simplement câbler une classe « Ajax » dessus, et ça va automatiquement mettre en place une requête « Ajax » sur ce bouton, donc on n'a pas toute la logique à écrire, ça peut être intéressant à certains projets pour aller vite, de faire ce genre de manipulations et d'utiliser ce genre de librairies. Et on a enfin le « intercooler.js » qui est pas mal aussi, qui a une vrai librairie, plutôt grosse, mais qui permet de faire énormément de choses, et qui viendra ajouter sur vos éléments, en fait un nouvel attribut qui s'appellera « ic », alors on en a plusieurs. On a des « ic-post-to », « get », etc., qui permettent de récupérer de l'information avec une documentation quand même plutôt bien faite, et puis beaucoup d'exemples, puisqu'on va pouvoir récupérer des informations sur n'importe quel élément, et venir se câbler, en plus, c'est disponible pour jQuery, et pour « zepto.js », donc c'est quand même intéressant puisqu'on peut l'interfacer avec pas mal de librairies. Vous voyez que le monde des librairies « Ajax », c'est quand même un monde assez dense, évidemment, si c'est pour un petit projet, moi, je vous conseillerais très clairement d'aller sur de l'Ajax en jQuery, et si c'est un projet plus structuré, je vous conseille quand même, de soit de partir sur « react », qui propose beaucoup d'outils qui vous permettent d'aller vite, ou alors, sur de l'Angular, qui est un Framework complet, et qui dispose également de tous les modules possibles pour faire de la requête « Ajax ». Donc là après, ce sera à vous de choisir, mais c'est vrai qu'il vaut mieux, dans le cas d'un gros projet, partir sur un Framework, dans le cas d'un petit projet, partir juste sur du jQuery qui est largement suffisant pour réaliser la plupart des petits projets.

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 !