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

Utiliser les réponses dans votre code

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous verrez comment ajouter des méthodes pour intercepter les bonnes et les mauvaises réponses. Ainsi, vous pourrez réagir en conséquence.
04:46

Transcription

Alors là, attention, parce que deux utilisations différentes : qu'est-ce qu'il se passe quand ça marche ? Et quand ça ne marche pas ? Ça, on le verra après, mais attention, parce que ça va être différent la définition de ce qu'il se passe après, en tous cas pour une réponse correcte en fonction de si vous utilisez du Proxy ou si vous utilisez un Ajax, comme ça. Alors, si vous utilisez Proxy, ça va se passer ici, directement. C'est à dire que quand on va faire « get », on va le passer en deuxième paramètre, là, la fonction. Ça, ça va marcher. La fonction « deuxième paramètre » va être récupérée et ça va passer. On va essayer, vous savez quoi, on va essayer. Ici, on va se câbler une fonction, on va la mettre dans une variable. On va l'appeler, cette variable, « success ». Donc, ça va être une fonction qui va récupérer la réponse, d'accord ? Et qui va simplement faire un « console.log » de la réponse. Voilà, quelque chose de très simple. Et ce « success » là, on va le placer à l'intérieur de « get ». On va enlever le « post » qui ne sert pas à grand chose, en réalité, on ne va garder que le « get », ici, et l'« Ajax » derrière. Alors, ça, ça va fonctionner sur un « get » comme ça. Voilà, je recharge, je vais dans ma console, effectivement, et je récupère un objet. Ça vous paraît particulier ou pas ? Tout à l'heure, pour récupérer un objet, on a dû faire quoi ? Un « JSON.parse », récupérer l'objet, le nettoyer, etc. Et là, on en était à 30 lignes. Regardez. C'est là où c'est intéressant, c'est que l'on récupère un objet. Alors, certes, pour le moment, il n'est pas nettoyé. Oui, notre objet n'est pas nettoyé, il va quand même falloir le nettoyer un petit peu, on aura besoin de travailler la réponse. Mais en tous cas, on a déjà toute la phase de « JSON.parse » qui est prise en compte. C'est à dire que « jquery » avec sa requête dans sa réponse, comprends que c'est un objet, que l'on vient de récupérer, et automatiquement, il nous le propose. C'est déjà une partie du travail en moins. Maintenant, si j'ai envie d'implémenter la même chose, c'est-à-dire une « callback », une fonction retour, au moment où c'est terminé, je vais devoir la passer dans les options ici, pour mon objet Ajax, dans ma méthode Ajax, c'est pas la même chose. Ici, on est obligé d'utiliser une propriété de l'objet, en fait, sur les options. Donc là, on a une propriété qui va nous permettre de travailler, qui s'appelle « success ». Alors, attention à ne pas confondre avec une autre propriétés qui se trouve plus haut, qui s'appelle, on l'avait tout à l'heure, « complete ». Alors « complete », c'est juste avant que ce soit terminé. Ça va être terminé, mais ce n'est pas encore fini, et ça, c'est appelé après le « success ». Donc, le « success » passe, on a déjà la réponse et le « complete », c'est terminé, terminé, c'est vraiment la fin, fin, fin, donc il va fermer l'objet XHR. Donc faites attention, ça s'utilise vraiment en fin, si on veut faire quelque chose, et surtout dans tous les cas. Que ce soit une réponse correcte, une réponse négative, ce sera levé. Vous utiliserez « success » pour récupérer l'information. Une fois que c'est OK, c'est « success ». C'est pour ça, d'ailleurs, vous remarquez que j'ai appelé la variable « success », c'est pour aller un plus vite. On peut dire, ici, « success = success ». Comme vous référencez une variable, vous n'êtes pas obligés de faire ça. Il ne faut pas le faire, car vous appelez une variable « success », en fait, qui est ici, qui va mettre à l'intérieur, ici, la fonction. Vous pourriez tout à fait, sans aucun problème, écrire exactement la même chose, c'est à dire écrire ça, comme ça, ça marcherait aussi. Vous pouvez définir une fonction « callback » directement. Mais, je vous conseille quand même de mettre ça dans une variable, car c'est quand même plus propre. Si vous voulez avoir quelque chose de compréhensible, car des fois ça peut paraître un petit peu bizarre avec la clé, la valeur, etc., vous pouvez appelez ça « successCallback » et du coup, vous appelez cette partie « successCallback », vous la recalez ici. Un peu de « refactoring », ça ne fait pas de mal. Comme ça, on a une vraie « callback », une « successCallback », qui est une fonction, qui est passée ici et ici, et qui pourrait correspondre, ou qui correspond, d'ailleurs, exactement à ça. Ce que vous avez là, c'est le reflet exactement de ça, à cet endroit, et à cet endroit. Ça permet de ne pas avoir à les écrire à l'intérieur. Je vais vous montrer ce que ça donne sur un « get ». Si on passe une fonction comme ça, ça devient un peu moins lisible. Donc, il est préférable de mettre ça dans une variable au-dessus, et de l'utilisez dans le corps de la fonction directement, et puis comme ça, c'est propre. Là, en faisant ça, on va avoir deux fois la même réponse, évidemment. Donc là, on a « objet qui passe » et puis, ici, on fait le « success », et on passe cette information-là, et donc ça va revenir, il le fait deux fois, mais on ne le reçoit qu'une seule fois à cet endroit-là, tout simplement car c'est la même réponse. Donc pour le moment, il ne trouve pas plus de choses que ça à faire, et donc du coup, ça nous mets qu'une seule fois la réponse. Donc là, vous avez bien le fonctionnement et l'utilisation d'une réponse à l'intérieur du code. Bien évidemment, vous ferez attention, parce qu'après, il faut faire des choses. Là, vous avez récupérez la « data », maintenant il faut la traiter. Ce que vous allez en faire derrière, ça vous regardera, vous pourrez mettre ce que vous voulez et travaillez avec la réponse. On va voir comment on pourrait soumettre un formulaire et ce qu'il va se passer quand on soumet un formulaire et comment je vais anticiper cette information.

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 !