JavaScript

JSON & AJAX

Raconté par Arnaud de Mesmay sur la base d'un cours créé par Rémi Forax et Vincent Jugé.

JSON

Notation JSON

Sous-ensemble de la notation sur les objets et les tableaux JavaScript qui sert de format d'échange de données

const aquarium = {
  name: "my-aquarium",
  fishs: [{
	name: "guppi",
  }, {
	name: "sushi",
	price: 20
  }]
};
console.log(JSON.stringify(aquarium));

Seuls les types primitifs sont supportés : boolean, number, string, array & object.
Les noms des propriétés apparaissent entre " " !

JSON.parse

La commande JSON.parse permet de décoder en JavaScript une chaîne de caractères comme un objet JSON.

const array = JSON.parse('[1, 2, 4, true]');
console.log(array);
const object = JSON.parse('{ "name": "john", "age": 26 }');
console.log(object);
JSON.parse('{ name: "john", age: 26 }');  // oops

Asynchronous Javascript And XML

AJAX ou AJAJ ?

AJAX permet de faire, en JavaScript, des requêtes à un serveur en enregistrant une fonction qui sera exécutée plus tard, lorsque les données du serveur seront disponibles.

Le fait de reporter le traitement au moment où les données seront présentes est appelé traitement asynchrone.

Dans la réalité, on utilise plutôt JSON que XML comme format de transport, mais on garde le nom AJAX (au lieu de AJAJ).

XML ou JSON ?

JSON est non structuré et non validable facilement donc il est utilisé pour les transferts de petites données (en ko).

XML est plus lourd mais structuré et validable, il est utilisé pour le transfert de données plus importantes (en Mo).

XMLHttpRequest(1/4)

Un objet XMLHttpRequest permet de faire une requête AJAX.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  console.log('mon état de connexion a changé');
};
ajax.open("GET", "images/js-object/demo.json", true);
ajax.overrideMimeType("application/json");
ajax.send();

XMLHttpRequest (2/4)

open(method, url, async?) configure la requête.
send() envoie la requête.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  console.log(ajax.readyState + ':' + ajax.status + ':' + ajax.responseText);
};
console.log("Configuring the request...");
ajax.open("GET", "images/js-object/demo.json", true);
console.log("Overriding Mime type...");
ajax.overrideMimeType("application/json");
console.log("Sending AJAX request...");
ajax.send();
console.log("AJAX request sent.");

XMLHttpRequest (3/4)

onreadystatechange est appelée lorsque cet état change.
readyState indique l'état de la requête.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  const state = ajax.readyState;
  const states = ["new", "opened", "headers_received", "loading", "done"];
  console.log(state + ':' + states[state]);
};
console.log("Configuring the request...");
ajax.open("GET", "images/js-object/demo.json", true);
console.log("Overriding Mime type...");
ajax.overrideMimeType("application/json");
console.log("Sending AJAX request...");
ajax.send();
console.log("AJAX request sent.");

XMLHttpRequest (4/4)

Si le readyState est 4 et que le status est 200,
on peut lire le responseText.

const ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
  if (ajax.readyState == 4) {
    if (ajax.status == 200) {
      console.log(ajax.responseText);
    } else {
      console.log("error " + ajax.status);
    } 
  }
};
ajax.open("GET", "images/js-object/demo.json", true);
ajax.overrideMimeType("application/json");
ajax.send();