Skip to content

Instantly share code, notes, and snippets.

@mrgarita

mrgarita/data.json

Created October 5, 2022 01:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrgarita/c54e7daf4325f24a119009299e617081 to your computer and use it in GitHub Desktop.
Save mrgarita/c54e7daf4325f24a119009299e617081 to your computer and use it in GitHub Desktop.
Download ZIP
JSON読み込み基本　古い方法（XMLHttpRequest）
Raw
data.json
{
"name": "Alice",
"age": 13,
"sex": "female"
}
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="main.js"></script>
<title>JSON形式の読み込み基本1</title>
</head>
<body>
<h1>XMLHttpRequestを使った例</h1>
<p>コンソールに表示しています...</p>
</body>
</html>
Raw
main.js
// ---------------------------------------------------------------------------------
// main.js : XMLHttpRequestを使って非同期にJSONファイルを読み込む
// ---------------------------------------------------------------------------------
// JSONファイルを読み込む関数
function readJSON(){
// JSONデータを一括してdataに読み込む
let data = JSON.parse(this.responseText);
// JSON全体
console.log(data);
// 個別に取り出す
console.log("name:" + data.name);
console.log("age:" + data.age);
console.log("sex:" + data.sex);
}
window.addEventListener("load", ()=>{
// HTTP通信を行う
const httpObj = new XMLHttpRequest();
// JSONデータ読み込み後の処理
httpObj.addEventListener("load", readJSON);
// JSONファイルを取得する（非同期通信：第3引数trueの場合）
httpObj.open("GET", "data.json", true);
// HTTPリクエストを送信する
httpObj.send(null);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment