「JSON」XMLHttpRequestでjsonファイルを受け取る
書式
1.xmlhttp.onload = function() {xxx}
2.const 変数名 = JSON.parse(this.responseText);
XMLHttpRequest の responseText プロパティは読み取り専用で、送信されたリクエストに続いてサーバーから受け取ったテキストを返します。
3.xmlhttp.open(“GET", テキストファイル名);
使用例
1.jsonテキストファイル
{
"name":"uer02",
"age":42,
"pets":[
{ "animal":"dog", "name":"Fido" },
{ "animal":"cat", "name":"Felix" },
{ "animal":"hamster", "name":"Lightning" }
]
}
{
"name":"uer02",
"age":42,
"pets":[
{ "animal":"dog", "name":"Fido" },
{ "animal":"cat", "name":"Felix" },
{ "animal":"hamster", "name":"Lightning" }
]
}
{ "name":"uer02", "age":42, "pets":[ { "animal":"dog", "name":"Fido" }, { "animal":"cat", "name":"Felix" }, { "animal":"hamster", "name":"Lightning" } ] }
2.jsonファイルを読み込む
<!DOCTYPE html>
<html>
<body>
<h2>XMLHttpRequestでJSONファイルを読み込む</h2>
<div id="show"></div>
<div id="show2"></div>
<script>
const xmlhttp = new XMLHttpRequest();
//コールバック関数を呼び出す
xmlhttp.onload = function() {
//文字列を JSON 解析
const resObj = JSON.parse(this.responseText);
//セレクタshowにjson属性ageを表示
document.getElementById("show").innerHTML = resObj.age;
//セレクタshow2にjson属性nameを表示
document.getElementById("show2").innerHTML = resObj.name;
}
//リクエストを初期化
xmlhttp.open("GET", "jsontest.txt");
//リクエストを送信
xmlhttp.send();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>XMLHttpRequestでJSONファイルを読み込む</h2>
<div id="show"></div>
<div id="show2"></div>
<script>
const xmlhttp = new XMLHttpRequest();
//コールバック関数を呼び出す
xmlhttp.onload = function() {
//文字列を JSON 解析
const resObj = JSON.parse(this.responseText);
//セレクタshowにjson属性ageを表示
document.getElementById("show").innerHTML = resObj.age;
//セレクタshow2にjson属性nameを表示
document.getElementById("show2").innerHTML = resObj.name;
}
//リクエストを初期化
xmlhttp.open("GET", "jsontest.txt");
//リクエストを送信
xmlhttp.send();
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <h2>XMLHttpRequestでJSONファイルを読み込む</h2> <div id="show"></div> <div id="show2"></div> <script> const xmlhttp = new XMLHttpRequest(); //コールバック関数を呼び出す xmlhttp.onload = function() { //文字列を JSON 解析 const resObj = JSON.parse(this.responseText); //セレクタshowにjson属性ageを表示 document.getElementById("show").innerHTML = resObj.age; //セレクタshow2にjson属性nameを表示 document.getElementById("show2").innerHTML = resObj.name; } //リクエストを初期化 xmlhttp.open("GET", "jsontest.txt"); //リクエストを送信 xmlhttp.send(); </script> </body> </html>
結果
42
uer02