JSON サーバー

JSON の一般的な用途は、Web サーバーとデータの交換です。

Web サーバーからデータを受け取るとき、データは常に文字列です。

用 JSON.parse() データを解析すると、それが JavaScript オブジェクトになります。

データを送信する

データを JavaScript オブジェクトに保存している場合、それを JSON に変換してサーバーに送信できます：

インスタンス

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

自分で試してみる

データを受け取る

JSON フォーマットのデータを受け取った場合、それを JavaScript オブジェクトに簡単に変換できます：

インスタンス

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

自分で試してみる

サーバーからの JSON

AJAX リクエストを使用してサーバーから JSON をリクエストできます

サーバーからの応答が JSON フォーマットで書かれていれば、文字列を JavaScript オブジェクトに解析することができます。

インスタンス

使用 XMLHttpRequest からサーバーからのデータを取得：

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

自分で試してみる

参照してください：json.txt

配列形式の JSON

配列形式の JSON 上で JSON.parse() の場合、このメソッドは JavaScript オブジェクトではなく、JavaScript 配列を返します。

インスタンス

サーバーから配列として返される JSON：

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

自分で試してみる

参照してください：json_array.txt