Dans le cas simple

• L'utilisateur rentre l'adresse d'une page internet dans la barre d'adresse
  • Pointe sur une ressource
• Le navigateur
  • fait un appel HTTP pour récupérer la page HTML
  • décode la page HTML en un arbre DOM
  • liste les ressources à aller chercher en plus: CSS, images
  • fait autant d'appels HTTP que nécessaire
  • puis traite les réponses:
    • Images et CSS: appel au moteur de rendu
  • attend que l'utilisateur clique sur un lien

On est donc dans un mode statique:
Le navigateur ne fait rien de plus qu'afficher du contenu

Cas dynamique

• Les ressources ne sont plus uniquement HTML+CSS+Images
  • Mais aussi des scripts Javascripts
• Ces scripts tournent sur le navigateur, en local
• On peut débrancher internet, ça va quand même marcher...
  • (Sauf le script fait des appels HTTP)
• Les scripts peuvent eux-même faire des appels HTTPs
  • Non pas des pages HTML, mais des données structurées
  • Ou, plus généralement, une interaction avec des services web
• L'ensemble HTML+CSS+Images+Javascript est un programme autonome
  • qui tourne sur le navigateur
  • Pensez: gestion de mail, calendrier, jeu, etc.

• Une page web est un programme
• qui réagit à des évènements:
  • Click de souris
  • Chargement de page
  • .... réception d'une réponse à une requête HTTP
• Pour réagir: fonction de callback

someDOMelement.addEventListener("click",function(e){
   // what to do on a click --> THIS IS A CALLBACK FUNCTION
},false);

Problème: peu lisible en cas de chainage. Imaginons

• affiche(meteo,callback) : affiche la météo et appelle callback
• appelAJAXmeteoVille(ville,callback) : appel AJAX pour la météo de ville
• appelAJAXgeoLoc(gps,callback) : appel AJAX pour trouver la ville associé à gps

appelAJAXgeoLoc(gps, function(ville) {
  appelAJAXmeteoVille(ville, function(meteo) {
    affiche(meteo, function() { console.log('OK') })
  });
})

Une promesse est un objet (Promise) qui représente la complétion ou l'échec d'une opération asynchrone.

C'est à lui qu'on attache des callbacks plutôt que de passer ces callbacks à une fonction.

Avec des promesses

appelAJAXgeoLoc(gps) : quand on lui applique la méthode .then(fun), exécute la promesse et donne le résultat à fun.

appelAJAXgeoLoc(gps).then(function(ville) {
  return appelAJAXmeteoVille(ville);
})
.then(function(meteo) {
  return affiche(meteo);
})
.then(function() { 
  console.log('OK');
})
.catch(failureCallback);

Avec des promesses

appelAJAXgeoLoc(gps)
.then(ville => appelAJAXmeteoVille(ville))
.then(meteo => affiche(meteo))
.then(() => { console.log('OK'); })
.catch(failureCallback);

Avec des promesses

appelAJAXgeoLoc(gps)
.then(appelAJAXmeteoVille)
.then(affiche)
.then(() => { console.log('OK'); })
.catch(failureCallback);

L'API Fetch fournit une interface JavaScript à base de promesses pour les requêtes et les réponses HTTPs.

Ce genre de fonctionnalité était auparavant réalisé avec XMLHttpRequest en Javscript pur.

Une alternative consiste à utiliser la librairie jQuery.

Requête avec fetch():

const myImage = document.querySelector('img');

fetch('flowers.jpg')
.then(function(response) {
  return response.blob();
})
.then(function(myBlob) {
  const objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;
});

De la classe Response. Méthodes interessantes:

• .blob() : pour une image
• .text() : pour du texte
• .json() : pour du json ! (voir plus loin)

besoin d'échanger des données entre acteurs

• Données bancaires
• Données de remboursement de santé
• Description d'une recherche d'itinéraire dans Google Maps
• La réponse associée: description d'un itinéraire
• ...

D'où la nécessité d'un format de structuration universel

• Pour toutes sortes de données structurées
• Lisible sur tous les systèmes
• Le plus simple possible

• Bonne formation = description d'un arbre
• Mais pas nécessairement avec la bonne structure
• Rôle d'une grammaire
  • Doctype (voir l'entête HTML)
  • Schéma XML (XSD)
• Voir le tuto sur la validation XML

• Distinguer les éléments/attributs issus de divers vocabulaires
• Cibler le processeur XML adapté au langage
• Un espace de nom est une chaine de caractères

  XHTML

  "http://www.w3.org/1999/xhtml"

  MathML

  "http://www.w3.org/1998/Math/MathML"

  SVG

  "http://www.w3.org/2000/svg"

  RDF

  "http://www.w3.org/TR/REC-rdf-syntax#"

  Dublin Core

  "http://purl.org/dc"