🐉 XMLHttpRequestのサンプルコードを実装してみた【get通信】
JavaScript XMLHttpRequest ENJIN
作成日： 2021/12/19
1

ここまでの学習を踏まえ、下記サイトを参考にサンプルコードを実装。
ブラウザで動かしてみる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Ajaxてすと</title>
</head>
<body>
    <div id="result"></div>
    <script>
        var result = document.getElementById('result')
        var ajax = new XMLHttpRequest();

        ajax.addEventListener('load', function() {
            result.textContent = this.responseText
            // result.textContent = ajax.responseText
        })

        ajax.open('get', './sample.txt');
        ajax.send()

    </script>
</body>
</html>

サンプルテキスト

結果

ブラウザ上で以下のように反映。
ちゃんと表示された！！
スクリーンショット 2021-12-19 午後3.39.24.jpg

メモ

ajax.addEventListener('load', function() {
    result.textContent = this.responseText
    // result.textContent = ajax.responseText
})

thisは、関数内で定義されるため、ここではajax = new XMLHttpRequest（XMLHttpRequestオブジェクト）を指す。
つまり、変数ajaxと同義。

重要なので追記

XMLHttpRequestオブジェクトにはイベントハンドラーが用意されている。

①リクエストを送信した時

ajax.addEventListener('loadstart', function() {
    
})

②リクエストが成功した時

ajax.addEventListener('load', function() {

})

③リクエストが失敗した時

ajax.addEventListener('error', function() {

})

これら①②③を使うと、代用となり、下記記述は不要になる。

if(ajax.readystate === 4) { //　全ての応答データを受信した時
	if(ajax.status === 200) { // 通信が成功した時
		
	}
}

loadstart load errorを使用して、それぞれの関数に実行したい処理を書けばOK

イベントハンドラーの種類は他にもあり。
【参考】『JavaScript本格入門』 P396〜
Yu
事業会社にてコーダーをしています。制作は6年目。 インプットしたことをアウトプットしています。