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

Mettre en place jQuery sur un projet

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez comment lier la librairie à votre projet et vérifier qu'elle a bien été récupérée. Voyez également comment nettoyer le fichier.
03:48

Transcription

Bon alors, maintenant que vous avez vu comment utiliser l'objet XMLHttpRequest, qui soit dit en passant, est un petit peu barbare, il y a quand même beaucoup de choses à écrire pour pas grand chose au final, simplement un appel sur un serveur et reconstituer un objet, ça fait beaucoup de lignes, enfin selon moi, en tout cas, voilà, une trentaine de lignes pour faire ça, non, ce n'est pas possible. Aujourd'hui, on a des librairies qui nous permettent de travailler plus rapidement et d'écrire le moins de lignes possibles, il ne faut pas s'embêter, il faut les utiliser absolument. Si vous faites ça, c'est bien, pourquoi pas, vous faites un script de base, vous allez perdre du temps, ça sert à rien, alors autant utiliser une librairie. jQuery est une très bonne librairie, et jQuery , on l'a installé au tout début, maintenant on va le relier. Alors, comment je vais relier jQuery dans mon projet ? D'abord, je vais le relier ici. Je vais ici, lui démarrer un script, alors cette fois-ci, vous allez le démarrer avec « -src », vous allez voir, parce que quand vous allez faire tabulation, avec « -src », ça va tout de suite vous le remplir. On va aller chercher notre librairie qui se trouve dans « node_modules », et puis ensuite dans quoi ? « / », donc là, on a jQuery, donc « /jquery/ », et puis ensuite, on va aller récupérer « dist », donc « dist » qu'on a ici, donc on va le rajouter là, « dist », et enfin on va prendre la distribution qui nous intéresse. Alors, on en a plein des distributions, il y a les distributions classiques « jquery.js » que je vous conseille quand vous êtes en développement, et puis « jquery.min.js », celle-ci je vous la conseille quand vous êtes en mode production, parce que c'est une version « minifiée », voilà, version « minifiée », et lisible bien sûr. Et version classique où là, on va quand même pouvoir se retrouver dedans, et aller voir ce qui se passe. Donc là, vous allez le relier, ici « /jquery/dist », donc « jquery.js », OK, et puis ensuite vous allez recharger votre page pour être bien sûr que vous récupérez votre librairie. Normalement, en rechargeant, vous devriez ici avoir un statut 200 aussi, parce que forcément, la récupération de ressources est toujours pareille, ça fonctionne de la même manière, sauf que pour le coup ici, ça, ce n'est pas à asynchrone, c'est synchrone, on récupère les ressources de façon synchrone, on les ajoute à la page, et à partir de là, on peut travailler. Remarquez que tout n'est que requête, quand on fait du web, tout n'est que requête, absolument tout. On appelle une page, on appelle une ressource, on appelle une image, on appelle une vidéo, tout ça, ce ne sont que des ressources, et donc vous faites toujours des requêtes, et on reçoit toujours une réponse. Quand vous avez des pages qui mettent 1000 ans à charger, c'est parce qu'il y a trop d'images, trop de ressources, parce que vous avez des requêtes qui partent, qui sont attachées à votre page, et toutes ces requêtes-là sont en synchrone, et il faudrait les passer en asynchrone, si on veut accélérer les choses. Bon, en tout cas, ici, on a jQuery, c'est cool. Si on veut vérifier qu'on a bien jQuery, on tapera ici un « $ », et on fera entrée. Alors si vous tapez un « $ », que vous faites entrée, que vous voyez que c'est l'objet jQuery, c'est que c'est bon. Alors vous pourriez aussi essayer d'aller récupérer des méthodes sur jQuery, si vous obtenez tout ça là, « Ajax, Camel Case, Clone », etc. C'est que vous êtes bien sur un objet jQuery, et vous allez pouvoir travailler convenablement avec jQuery. Une dernière chose que l'on va faire, on va ici maintenant, supprimer toute cette partie-là. Ben oui, je sais, c'est dur mais c'est comme ça, on va supprimer toute cette partie-là, et on va ensuite se constituer ici, une requête qui va du coup être une requête via jQuery. Alors, vous allez faire un petit « console.log » ici à cet endroit-là aussi, pour être bien certain que si je demande jQuery ici, j'obtiens bien jQuery, et c'est bien jQuery que j'ai. Quand vous allez voir ça, c'est que c'est OK, vous avez bien jQuery, on va pouvoir travailler avec. Vous pourriez aussi ici commencer par vous constituer une petite « div » avec un identifiant qui serait l'identifiant « user », d'accord, et on va, hop comme ça, se mettre de coté une « div » pour injecter les informations un petit peu plus tard. Maintenant qu'on a ça, on est prêt à pouvoir démarrer, et on va essayer de regarder un petit peu ce qui est disponible d'abord sur jQuery, avant de pouvoir se lancer.

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
 
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :26 mai 2017
Durée :2h03 (30 vidéos)

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 !