フロントエンドブログ

Web制作で役立つフロントエンドの知識を発信しています!

【JavaScript】Ajaxを使ってJSONデータを受信しよう

楽天ブックス

 

こんばんは。今日も雨が振りましたね。

ただ秋に突入しだんだんと過ごしやすい気候になってきました。

さて、今日は少し難しいのですがAjax通信を用いたコードを展開します。

まず2つファイルを用意します。(コピペしてお試しください)

 

cakes.json

[
{
"name": "ショートケーキ",
"price": "300円"
},
{
"name": "チョコレートケーキ",
"price": "400円"
},
{
"name": "ミルクレープ",
"price": "500円"
}
]

index.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Ajax</title>
</head>

<body>
<div id="output"></div>
<!-- ここに、JavaScriptを記述します -->
<script>
const url = 'cakes.json';

const getLocations = () => {
return new Promise(function (resolve) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();

xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
let result = JSON.parse(xhr.responseText);
resolve(result);
}
}
})
}

getLocations().then(function(locations) {
let html = '';
for (let i=0; i<locations.length; i++) {
html += locations[i].name + '/' + locations[i].address
+ '<br>'
}
document.getElementById('output').innerHTML = html;
})
</script>
</body>

</html>

上記が完成版のコードです。

<div id="output"></div>
<!-- ここに、JavaScriptを記述します -->
<script>
const url = 'cakes.json';

const getLocations = () => {
return new Promise(function (resolve) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();

xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
let result = JSON.parse(xhr.responseText);
resolve(result);
}
}
})
}

一つずつ見ていくとここでは変数urlを定義しcakes.jsonファイルを格納します。

そしてそれ以降はAjax通信を始めるにあたっての決まり文句となりますのでここでは解説を割愛いたします。

getcakes().then(function(cakes) {
let html = '';
for (let i=0; i<cakes.length; i++) {
html += cakes[i].name + '/' + cakes[i].address +
'<br>'
}
document.getElementById('output').innerHTML = html;
})
</script>

そしてAjax通信のgetcakes()関数を実行し各種データをfunction(cakes)に格納します。

そしてデータの個数分だけfor文を回し変数htmlに格納します。

これでブラウザを見るとケーキと金額が個数分出ていると思います。Ajax通信は複雑で分かりづらいのですが是非試してみてください\(^o^)/

ファイル管理にお困りのリモートワーカーへ【Web-luck(ウェブ・ラック)】

 

継続は力なり