Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

JavaScript : JSON, AJAX et les requêtes asynchrones

Faire une requête avec les méthodes proxy

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les méthodes proxy vous permettront d'aller plus vite que d'effectuer une requête à la main. Néanmoins, sachez qu'elles seront limitées à deux verbes forts.
04:29

Transcription

À chaque fois que vous utilisez un nouveau projet que vous connaissez pas trop, je vous conseille toujours d'aller regarder dans la documentation. Là, je suis avec vous donc on va le faire ensemble. Si vous ne vous souvenez pas, soit vous re-regardez cette vidéo, c'est ce qui me ferait plaisir, mais vous pouvez aussi aller dans la documentation, elle va vous donner toutes les infos la doc, c'est pour ça qu'elle est faite. Alors, vous allez chercher dans la doc, la méthode « get », qui est une méthode proxy, qui va nous permettre de travailler avec une requête « get », et donc de faire une requête « get ». Alors, le mieux après, c'est même d'aller chercher comme ça « get », voilà, que vous allez avoir ici. Et attention, « jQuery.get() », voilà. C'est pas celui qui récupère un objet, mais c'est celui qui va nous permettre de faire un appel, un « HTTP GET », donc de constituer une requête en « get ». Vous allez aller dessus, et ce qui est très intéressant à chaque fois dans la documentation de jQuery, c'est qu'on va avoir absolument toutes les infos de comment utiliser la requête, comment travailler avec, qu'est-ce qu'on peut faire, qu'est-ce qu'on peut passer comme info, etc. On a aussi ici la signature de cette méthode, la signature c'est comment écrire cette méthode. Ici, on vous dit que le premier paramètre à donner, c'est l'URL, et ensuite on vous dit qu'on peut donner des datas, on peut donner une « Callback success », et on peut donner des « dataType ». « dataType », ce sera ce qu'on attend du serveur, donc là, ça peut être xml, json, script, texte, html. « success », ça va être une fonction anonyme qui va s'occuper de récupérer la réponse après. Les datas, ce serait ici par exemple, vous avez des paramètres à mettre dans l'URL. Vous voyez, les paramètres qui s'écrivent comme ça, par exemple « color=blue ». Ici, ça, ça vous allez pouvoir le constituer, et ça va être en fait un objet, un objet avec les clés, les valeurs, et puis il va transformer ça directement en paramètres, ce qui sera super simple, et ce qui sera très utile pour nous. Et enfin, l'URL, vous vous doutez bien de ce que c'est, c'est une URL. Comment on va faire un appel, eh bien, c'est très simple, on va simplement faire ça, on va faire « get() », et on va, comme tout à l'heure, récupérer ici notre URL, à cet endroit-là. On va la passer, alors attention, cette URL sera une « string ». Ce que je vous conseille toujours, c'est de la mettre de coté. « var url = », et là, vous allez constituer votre « string » avec, n'oubliez pas, « user.json », c'est ce qu'on veut récupérer. « ; » à la fin, et c'est comme ça, et puis à l'intérieur de « get() », on va simplement mettre l'URL. Et pour le moment, on va pas du tout câbler de fonction retour, on va juste lui demander de nous faire un petit appel Ajax comme ça, vous voyez que par rapport à tout ce qu'on a écrit tout à l'heure, c'est quand même beaucoup plus simple. Ici, maintenant, on va recharger. Il se passe rien. Ah, on va dire ben tiens, ça n'a pas marché. Mais si, bien sûr, allez dans l'onglet « Network », et regardez ici l'appel que vous avez fait qui est bien parti, qui, du coup, a obtenu une réponse à un moment ou à un autre, et vous avez bien reçu la réponse. Donc ça, c'est l'appel Ajax qu'on a câblé, qu'on a mis en place à cet endroit-là. Alors, maintenant, bien sûr c'est bien de faire une requête en « get », mais on pourrait aussi utiliser l'autre verbe, « post ». Quand vous utilisez « post », ici, vous allez devoir avoir, eh bien, des informations aussi, et la signature est un petit peu différente. Si vous regardez mon écran, ici vous allez avoir l'URL, ce qui se passe en « success » par exemple. Et vous pouvez aussi poster des datas, il va falloir envoyer des datas. Comment on fait pour envoyer des datas ? Vous voyez qu'ici en fait, en réalité, les datas, ça va être passé en deuxième. Toujours pareil, je vous conseille d'aller sur le site de jQuery, de regarder la méthode « post » qui nous permet de faire un appel, « jQuery.post() », et ici, on verra qu'effectivement, en premier les URLs, en deuxième les datas. Les datas qu'on a là, attention, ce ne sont pas des datas qui vont nous permettre de constituer les éléments de la requête au-dessus, donc, c'est-à-dire ce qu'on pourrait passer à l'intérieur de l'URL, mais c'est bien les datas que vous voulez soumettre. Donc, quand vous faites une soumission de formulaire par exemple. Ça, on va l'utiliser pour faire de la soumission de formulaire, donc faites attention, c'est pas du tout la même chose que pour une méthode « get ». Ce n'est pas très grave, nous pour l'essai, on peut essayer comme ça, de toute façon ça ne va pas marcher car on a pas de méthode « post » sur notre serveur pour intercepter, vous allez bien le voir passer quand même. Ça va nous faire un 200 sur le « post », parce que lui, il va tout récupérer, il s'en fiche, il va tout récupérer, mais en tout cas, sachez que voilà, si vous postez des informations, il faut le faire sur un service qui est adapté, et donc envoyer de l'info. Donc, méthode « get », méthode « post », ça marche sans aucun problème, il suffira juste de faire un appel, et bien sûr après, il va quand même falloir récupérer l'information, mais on va le voir plus tard. D'abord, on va se focaliser sur la constitution d'une requête avec l'objet Ajax, ça change un petit peu les choses, pas grand chose, mais ça change un tout petit peu.

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 !