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

Écrire une requête AJAX avec jQuery

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Grâce à l'objet AJAX, vous gardez un contrôle total sur les requêtes. De plus, vous pourrez les constituer avec précision.
05:04

Transcription

Alors, on vient de voir deux requêtes « proxy ». Pourquoi je dis « proxy » ? Parce que c'est vraiment des requêtes « proxy ». Je vous montre l'objet « Ajax ». La méthode « Ajax » sur jQuery. Qu'est-ce qu'elle fait la méthode « Ajax » sur jQuery ? Eh bien, elle a de ça différent des méthodes « proxy » que il faut tout remplir, voilà la signature de cette méthode. Une « URL », bon, ça, ça ne change pas beaucoup, et après surtout, des « settings », c'est-à-dire en fait des paramètres, et ces paramètres, ça doit être un objet. Qu'est-ce qu'on a dans les paramètres ? Bien sûr, tout est définit en dessous. Le grand intérêt de « jQuery.ajax », c'est que ça nous permet de constituer notre requête entièrement, et de mettre tout ce qu'on veut à l'intérieur, de spécifier le verbe, de spécifier ce qu'on accepte comme data, de spécifier tous les « header » possibles, est-ce que c'est asynchrone ou pas, de spécifier qu'est-ce qu'on fait avant l'envoi, de mettre en place un cache si on veut du cache, de mettre en place ce qui se passe quand c'est « completed », donc quand c'est fini, qu'est-ce qui se passe quand ça va être en erreur. Donc là, vous avez possibilité de tout définir. Celui-ci, vous l'utiliserez dans le cas où vous avez besoin de faire des requêtes très précises, d'ajouter des « header » par exemple pour vous authentifier, d'ajouter un password, parce que c'est protégé. Toutes les options sont possibles et imaginables, sont là, référencées, vous allez pouvoir les utiliser facilement. Nous, on va quand même constituer ça simplement, mais sachez que c'est cet objet que vous devrez utiliser cette méthode-là, si vous avez besoin de constituer une requête particulière et personnalisée. Les requêtes « proxy », c'est bien pour aller vite quand on doit rapidement récupérer une info, ou envoyer une info sans avoir beaucoup d'informations à passer, par contre, dès qu'on doit constituer une requête un peu particulière, on utilisera « Ajax ». Donc on va faire pareil, on va faire « url », par contre, là, vous êtes obligés derrière, de référencer des infos, parce que si vous faites « Ajax » comme ça, bon ben, il sait pas quoi utiliser, donc on va ici se retourner vers la doc, et on va lui dire OK. Qu'est-ce que je fais comme info de base ? On va regarder les petits exemples qui sont en bas, et vous verrez que de base, si vous faites une requête sans donner de verbe par exemple, c'est du « 'GET' », de base. Si vous voulez référencer le verbe, vous devrez ici donner les infos. Pour le verbe, on a ici, hop, le paramètre « method », vous voyez que par défaut c'est « 'GET' ». Nous, on va quand même le mettre pour le style, voilà. « method » ici, et « 'GET' », donc là, on est bon. Ça c'est bien, parce que vous pourriez carrément faire une fonction qui fait un appel à « Ajax », et puis vous lui passeriez le verbe que vous voulez, comme ça, vous auriez pu qu'à lui passer l'« URL » et le verbe, vous pouvez vous faire quelque chose de supplémentaire à cette requête-là, donc pas de problème pour constituer vous-même des fonctions. Ensuite, on pourrait lui donner quoi, ben on pourrait lui dire si c'est « async » ou pas. Donc « async », nous, on veut que ce soit asynchrone, mais on pourrait vouloir que ce soit pas asynchrone, et dans ce cas-là, on aurait possibilité de venir le définir, par exemple « async » ici, on va le mettre à « true ». Alors, attention, l'objet que vous constituez ici, c'est un vrai objet JavaScript, c'est des options, et d'ailleurs, même, vous pouvez aussi le sortir, c'est-à-dire que vous pourriez aussi, hop, faire une « var getOption », voilà, qui sera ici votre objet, que vous constituez proprement, et que vous lui passez en deuxième paramètre sans aucun problème, ça, vous avez la droit de le faire. Ensuite, que pourrait-on avoir ? On en a un qui est pas mal, c'est le cache. J'ai envie de vous le montrer parce que celui-là est génial. Quand vous activez le cache, vous allez voir que ce qu'il va faire, c'est qu'il va ajouter quelque chose à votre requête, ça permet d'avoir à chaque fois quelque chose qui soit est cachée, soit est pas cachée, alors il faut juste que je le retrouve, je vais le rechercher, voilà, « cache », donc là, on vous le dit, ça va ajouter en fait directement un « timestamp » automatiquement aux requêtes, si le cache est à « false ». Ça c'est bien, quand vous voulez récupérer toujours une réponse propre, ça peut arriver que vous récupériez quelque chose qui soit pas propre. Donc là, on va mettre « cache » à « false », et vous allez voir, il n'y a pas de cache sur les requêtes. OK, on relance, alors regardez ce qui s'est passé, ça, c'est la 1ère que j'ai faite en « 'GET' », la 2ème que j'ai faite en « 'POST' » et la 3ème que j'ai faite en « 'GET' » avec une option qui était l'option pas de cache, eh bien, pas de cache, regardez, il m'a rajouté ici un « timestamp », ce qui fait que à chaque fois que je vais appeler, je vais avoir une réponse qui sera correcte, et qui sera pas cachée, parce que je demande à chaque fois au serveur, vraiment une « URL » complètement différente. Ça, ça peut être très utile dans le cas où vous avez un web server en face qui fait du cache et qui est un peu énervant, là, vous pourrez ne pas avoir de cache, ça peut être bien. Vous voyez qu'il y a plein plein plein d'options qui existent pour constituer une requête précise. On peut utiliser des « headers » particuliers, plein plein plein de choses, la différence est que vous devez spécifier le verbe, ou alors vous en spécifiez pas, ce sera du « 'GET' », et que surtout, vous pouvez avoir le contrôle surtout. Ici, ce sera que du « 'GET' », ici ce sera que du « 'POST' », c'est de la méthode « proxy », donc soit on fait du « proxy », soit on fait de l'« Ajax » pur, et à ce moment-là, on référence. Vous voyez aussi autre chose, c'est que travailler avec ces objets-là, ça réduit quand même largement, drastiquement même, le nombre de lignes à taper. Tout à l'heure, on était à une trentaine de lignes, ici, juste pour faire la requête, on n'a pas encore parlé de la réception de la réponse, mais en tout cas, ça va être pareil, il n'y a pas beaucoup de choses à faire, et là, on se retrouve avec quelque chose de propre.

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 !