🐉
XMLHttpRequestのサンプルコードを実装してみた【get通信】
作成日:
2021/12/19
1
ここまでの学習を踏まえ、下記サイトを参考にサンプルコードを実装。
ブラウザで動かしてみる。
-
XMLHttpRequestの使い方(1)
https://wp-p.info/tpl_rep.php?cat=js-practice&fl=r16 -
同階層に以下のファイルを用意する
index.html
sample.txt
<!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>
サンプルテキスト
結果
ブラウザ上で以下のように反映。
ちゃんと表示された!!
メモ
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〜
事業会社にてコーダーをしています。制作は6年目。
インプットしたことをアウトプットしています。