Serveur JSON


Table des matières

    Afficher la table des matières


Une utilisation courante de JSON consiste à échanger des données vers/depuis un serveur Web.

Lors de la réception de données d'un serveur Web, les données sont toujours une chaîne.

Analysez les données avec JSON.parse() et les données deviennent un objet JavaScript.


Envoi de données

Si vous avez des données stockées dans un objet JavaScript, vous pouvez convertir l'objet en JSON et envoyez-le à un serveur :

Exemple

 const myObj = {name: "John", 
  age: 31, city: "New York"};
const myJSON = 
  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JavaScript object into a JSON string, and send it to the server.</h2>

<script>
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>

</body>
</html>

Réception de données

Si vous recevez des données au format JSON, vous pouvez facilement les convertir en JavaScript objet:

Exemple

 const myJSON =
  '{"name":"John", 
  "age":31, "city":"New York"}';
const myObj = 
  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JSON string into a JavaScript object.</h2>

<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

JSON depuis un serveur

Vous pouvez demander JSON au serveur en utilisant une requête AJAX

Tant que la réponse du serveur est écrite au format JSON, vous pouvez analyser la chaîne dans un objet JavaScript.

Exemple

Utilisez XMLHttpRequest pour obtenir des données du serveur :

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();
</script>

</body>
</html>

Jetez un œil à json_demo.txt : https://basicit.org/js/json_demo.txt



Tableau en JSON

Lors de l'utilisation de JSON.parse() sur JSON dérivé d'un tableau, la méthode renvoie un tableau JavaScript, au lieu d'un objet JavaScript.

Exemple

JSON renvoyé par un serveur sous forme de tableau :

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
  }
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p>Content written as an JSON array will be converted into a JavaScript array.</p>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
</script>

</body>
</html>

Jetez un œil à json_demo_array.txt : https://basicit.org/js/json_demo_array.txt