JSONサーバー
JSONの一般的な使用法は、Webサーバーとの間でデータを交換することです。
Webサーバーからデータを受信する場合、データは常に文字列です。
でデータを解析するJSON.parse()と、データはJavaScriptオブジェクトになります。
データの送信
JavaScriptオブジェクトにデータが保存されている場合は、オブジェクトをJSONに変換して、サーバーに送信できます。
例
const myObj = {name: "John",
age: 31, city: "New York"};
const myJSON =
JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
データ受信中
JSON形式でデータを受け取った場合は、それをJavaScriptオブジェクトに簡単に変換できます。
例
const myJSON =
'{"name":"John",
"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_demo.txt");
xmlhttp.send();
json_demo.txtを見てください
JSONとしての配列
配列から派生したonJSONを使用する場合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_demo_array.txt", true);
xmlhttp.send();
json_demo_array.txtを見てください