fbpx
i

Class aptent taciti sociosqu
ad litorato rquent per conubia nostra

icone-cours-time-80

7h

icone-cours-level-intermediaire-80

niveau
intermédiaire

puis 25€ /mois

icone-cours-time-80

7h

icone-cours-level-intermediaire-80

niveau
intermédiaire

puis 25€ /mois

icone-cours-time-80

7h

icone-cours-level-intermediaire-80

niveau
intermédiaire

puis 25€ /mois

JavaScript : Requêter une ressource externe

L'objectif de ce module est de vous montrer les différentes techniques (anciennes et actuelles) pour requêter une ressource externe (fichier binaire ou non, script serveur etc.) depuis un client JavaScript. Il faut se représenter cette fonctionnalité du langage comme une "passerelle" permettant de récupérer (la plupart du temps) des ressources situées sur un autre domaine ou serveur (en cross-domain), impliquant des problématiques de CORS (cross-origin-resource-sharing) explicitées en fin de module.

 

Part #1 - Ajax ou l'ancienne méthode

Ajax ou l’ancienne méthode

À propos de l’acronyme

AJAX est un acronyme « récursif » pour Asynchronous JavaScript and XML (XML étant l’autre acronyme imbriqué)
Le développeur utilise très peu la réponse XML mais plus souvent JSON comme ce que renvoie la grande majorité des API
Le terme AJAX a été introduit par Jesse James Garrett (informaticien américain), le 18 février 2005. Depuis, il a rapidement gagné en popularité.

Présentation de l’objet XMLHttpRequest

XMLHttpRequest est initialement un composant ActiveX créé en 1998 par Microsoft pour leur application web Outlook Web Access, puis il a été ajouté à la norme ECMAScript relative au langage JavaScript et mis en œuvre sur la plupart des navigateurs du marché entre 2002 et 2005

Part #2 - La nouvelle globale fetch

La nouvelle globale fetch

L’api fetch (version es6) fournit une méthode plus facile, puissante et souple pour récupérer des ressources à travers le réseau de manière asynchrone, qu’avec XHR.
fetch fournit aussi un endroit unique et logique pour la définition d’autres concepts liés à HTTP comme CORS et les extensions d’HTTP.
fetch est maintenant supporté par la plupart des navigateurs y compris les mobiles.

Voici une exemple de requête classique (affichant votre adresse ip dans la console) que vous pouvez tester sur jsfiddle

Part #3 - CORS

CORS

Description du mécanisme

Le «Cross-origin resource sharing» (CORS) est un mécanisme consistant à ajouter des en-têtes HTTP laissant à un utilisateur la possibilité (ou non) d’accéder à des ressources d’un serveur situé sur une AUTRE ORIGINE que le site courant.

Aujourd’hui, de nombreuses pages web chargent leurs ressources (feuilles CSS, images, scripts) à partir de domaines séparés (comme les CDN, Content Delivery Network). Les architectures en micro-services (API externe) impliquent aussi ce mode de fonctionnement.

Le CORS permet de prendre en charge des requêtes multi-origines sécurisées et des transferts de données entre des navigateurs et des serveurs web. Les navigateurs récents utilisent le CORS dans une API contenante comme XMLHttpRequest ou fetch pour aider à réduire les risques de requêtes HTTP multi-origines.

Certificat de réussite