JavaScriptのXMLHttpRequestの非同期通信でJSONを取得するサンプルです。
目次
サンプル | XMLHttpRequest |
POSTでデータを送信してJSONを取得する | |
GETでデータを送信してJSONを取得する |
XMLHttpRequest
- 非同期通信でデータを取得できます。
- 受信成功時はonload、受信失敗時はonerrorのイベントが発生します。
POSTでデータを送信してJSONを取得する
POSTでデータを送信してJSONを取得するサンプルです。
9行目のボタンを押すとPOSTで通信が始まります。
テストするサイトとしてhttpbin(http://httpbin.org/)を指定しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
</head>
<body>
<form id="form1">
<input type="button" value="ボタン1" onclick="clickBtn1()" />
<input type="text" name="cs1" id="cs1" value="custom1" maxlength="7" />
<input type="text" name="cs2" id="cs2" value="custom2" maxlength="7" />
</form>
<script>
function clickBtn1() {
// FormDataで画面のform内の値を取得
const form1 = new FormData(document.getElementById("form1"));
const apiUrl = "http://httpbin.org/post"
var xhr = new XMLHttpRequest();
xhr.open("POST", apiUrl);
xhr.send(form1);
xhr.onload = function () { //受信成功時
if (xhr.status === 200) {
console.log(xhr.responseText); //JSON
var data = JSON.parse(xhr.responseText);
console.log(data.headers.Host); //js Object
} else {
console.log("Error1: " + xhr.statusText);
}
};
xhr.onerror = function () { //受信失敗時
console.log("Error2");
};
}
</script>
</body>
</html>
16行目のFormDataは、データを送信するため10,11行目のテキストボックスの名前と値を設定しています。
21行目は送信するデータを指定しています。
22行目のonloadイベントは受信成功時に実行されます。
24行目は、xhr.responseTextでJSONが表示されます。
25行目は、parseでJavaScriptオブジェクトにしています。
31行目のonerrorイベントは受信失敗時に実行されます。
出力されるJSONです。(IPアドレス等の一部情報は削除しています。)
{
"args": {},
"data": "",
"files": {},
"form": {
"cs1": "custom1",
"cs2": "custom2"
},
"headers": {
"Accept": "*/*",
"Accept-Encoding": "gzip, deflate",
"Accept-Language": "ja,en-US;q=0.9,en;q=0.8",
"Content-Length": "238",
"Content-Type": "multipart/form-data; boundary=----WebKitFormBoundaryBAJWoXbMT2yt3V1A",
"Host": "httpbin.org",
"Origin": "null",
},
"json": null,
"url": "http://httpbin.org/post"
}
6,7行目は、上記コードの10,11行目のテキストボックスで指定した値が入ります。
GETでデータを送信してJSONを取得する
GETでデータを送信してJSONを取得するサンプルです。
9行目のボタンを押すとGETで通信が始まります。
テストするサイトとしてhttpbin(http://httpbin.org/)を指定しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
</head>
<body>
<input type="button" value="ボタン1" onclick="clickBtn1()" />
<input type="text" name="cs1" id="cs1" value="custom1" maxlength="7" />
<input type="text" name="cs2" id="cs2" value="custom2" maxlength="7" />
<script>
function clickBtn1() {
// URLSearchParamsに画面の値をセット
const para1 = new URLSearchParams();
para1.set("cs1", document.getElementById("cs1").value);
para1.set("cs2", document.getElementById("cs2").value);
var url = "http://httpbin.org/get?" + para1.toString();
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();
xhr.onload = function () { //受信成功時
if (xhr.status === 200) {
console.log(xhr.responseText); //JSON
var data = JSON.parse(xhr.responseText);
console.log(data.headers.Host); //js Object
} else {
console.log("Error1: " + xhr.statusText);
}
};
xhr.onerror = function () { //受信失敗時
console.log("Error2");
};
}
</script>
</body>
</html>
16~18行目のURLSearchParamsは、データを送信するため10,11行目のテキストボックスの名前と値を設定しています。
20行目はURLとパラメータを指定しています。
25行目のonloadイベントは受信成功時に実行されます。
27行目は、xhr.responseTextでJSONが表示されます。
28行目は、parseでJavaScriptオブジェクトにしています。
34行目のonerrorイベントは受信失敗時に実行されます。
関連の記事