「JSON」XMLHttpRequestでjsonファイルを受け取る

2021年9月7日

書式
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" }
    ]
}

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>

結果
42
uer02

JSON

Posted by arkgame