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としての配列
JSON.parse()配列から派生したJSONを使用する場合、メソッドは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を見てください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。