JavaScriptのXMLHttpRequestの非同期通信でJSON取得

nas2023/05/06

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イベントは受信失敗時に実行されます。

関連の記事

JavaScriptのFetchの非同期通信でJSONを取得
JSONのデータ型とは＋JSON整形ツール

△上に戻る