Nos applications pouvaient communiquer avec le serveur,
sans avoir à se recharger totalement :
Mais cela suppose que le code Javascript ne se bloque pas en attendant la réponse du serveur
→ appel asynchrone (événements)
AJAX signifie
... mais en pratique, on peut échanger n'importe quoi avec le serveur, pas uniquement du XML.
La fonction fetch permet d’aller chercher une ressource sur un serveur de façon asynchrone.
Il représente la réponse à une requête HTTP.
Ajoute un gestionnaire de succès et un gestionnaire d’échec à la promesse.
Indication
then se comporte comme un listener qui écoute le changement d’état de la promesse.
//send HTTP request
fetch('json/chapitre1.json')
//then waits for the Response
.then(
function(response){//the request succeeds
console.log('success:' + response.status); },
function(error){ //network problem
console.log('fetch fails:');
console.log(error);
}
);
Les promesses peuvent être enchaînées.
fetch('json/chapitre1.json')
//then waits for the Response
.then(
function(response){return response.json();},
function(error){console.log(error) ;})
//then wait for the json parsing
.then(
function(data){console.log(data); },
function(error){console.log(error);}//format error
);
//send HTTP request
fetch('json/chapitre1.json')
.then(function(response){ //the request succeeds
console.log('success:' + response.status); })
.catch(function(error){ //network problem
console.log('fetch fails:');
console.log(error);
});
fetch('toto')
.then((x) => 42) // "enveloppe" 42 dans une promesse
.then((y) => console.log(y)); // Affiche 42
fetch('json/chapitre1.json')
//then waits for the Response
.then(function(response){
return response.json();
}})
//then wait for the json parsing
.then(function(data){
//do what you have to do with data
})
//captures and displays all errors
.catch(function(error){
console.log(error);
})
//avoids duplicated code in then () and catch ()
.finally(function(){
console.log('Process completed');
});
Il est inutile de parser le contenu d’une réponse "404 Not Found".
fetch('json/chapitre1.json')
.then(function(response){
if(response.ok){return response.json();}
else{throw("Err " + response.status);}
})
//then waits for the json parsing
.then(function(data){
//do what you have to do with data
})
//captures any rejected promise
.catch(function(error){console.log(error);
});
Indication
L’exception lancée dans le callback du 1er then sera "convertie" en "promesse échouée", et donc sera propagée jusqu’à l’appel de catch.
pirate.net.gmail.gmail renvoie une page HTML contenant la liste de vos messages récents.pirate.net,
et bien sûr n'affiche rien de ce qu'il vient de faire.pirate.net aurait pu tout aussi bien
faire une requête sur gmail quiPour éviter ce genre d'attaque, fetch possède des limitations :
file:,Lorsqu'un script, provenant d'un serveur srv1,
émet une requête AJAX vers un serveur srv2,
cette requête contient un en-tête supplémentaire :
Origin: http://srv1
Si le serveur srv2 fait confiance à srv1,
il inclut dans sa réponse l'en-tête suivant :
Access-Control-Allow-Origin: http://srv1
... et le navigateur autorise alors le script à accéder à la réponse.
Dans le cas contraire, le navigateur refuse de transmettre la réponse au script. Du point de vue du script, c'est comme si la requête avait échoué.
Remarques
const p = {
"nom": "Doe",
"prénom": "John",
"age": 42
};
Indication
Les attributs peuvent contenir n'importe quel type, y compris bien sûr des types complexes comme des tableaux ou d'autres objets.
Pour accéder à un attribut d'un objet, on utilise la même notation « pointée » qu'en Java ou en C :
let n = p.nom ;
Mais on peut également utiliser la notation « indicée » comme en Python :
let pr = p['prénom'] ;
Cette dernière est utile lorsque :
Remarque
Cela dit,
les caractères accentués (comme dans prénom ci-dessus) sont autorisés.
On aurait donc, dans ce cas, pu écrire :
let pr = p.prénom ;
p.prénom = "Jane" ;
p.adresse = "42, Main road" ;
delete p.age ;
adresse)age).undefined.JSON (Javascript Object Notation) est un sous-ensemble du langage Javascript, utilisé comme format de données sur le Web.
{}[]nullSyntaxe
null est supporté, mais pas undefinedJSON.parse
prend une chaîne de caractères JSON et renvoie l'objet correspondant.JSON.stringify
prend un objet supporté par JSON et renvoie la chaîne de caractères correspondante.public_html,
avec une application Javascript permettant de parcourir ce livre.Indication
Pour les liens du livre, il vous est conseillé
href="#xyz")
qui n'entrainent pas de rechargement de la page, ethashchange de window,
et en utilisant window.location pour déterminer le contenu à afficher.Remarque
Une alternative consisterait à intercepter les clics sur les liens, pour savoir quand charger et afficher les éléments du livre. Cette solution peut sembler plus naturelle pour le programmeur, mais elle crée une expérience utilisateur moins bonne :
async function downloadFirstChap(){
try{
let response = await fetch('json/chapitre1. json');
let data = await response.json() ; //do what you have to do with data
}
catch(error){
console.log(error);
}
}
async function downloadFirstChap(){
try{
let response = await fetch('json/chapitre1. json');
let data = await response.json(); //do what you have to do with data
}
catch(error){
console.log(error);
}
}
Avertissement
Si on oublie le await devant une fonction qui retourne une promesse, la variable contient une promesse, pas son résultat quand cette promesse est résolue → source de bug parfois difficile à détecter !