このような悩みの解決記事です。
「XMLHttpRequestがどのような挙動をするか」を理解するには、ブラウザで動かすのが一番です。
私自身概念は理解していたのものの、実際にどのような動きをするかを理解するには時間がかかりました。
そこで本記事では、サンプルコードを用いてXMLHttpRequestがどのように動くのかを確認したいと思います。
ぜひ、実際にコードを書いて挙動を確認してみて下さい。
ファイルを準備する
まずは、下記ファイルを準備しましょう(※同階層でOK)。
- index.html
- sample.txt
実装する
それぞれ下記コードを記述します。
<!-- index.html -->
<!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>
<!-- sample.txt -->
サンプルテキスト
反映画面を確認
以下のように反映されます。

コードを解説
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ajaxてすと</title>
</head>
<body>
<div id="result"></div>
<script>
// id resultをelement要素を取得
var result = document.getElementById('result')
// XMLHttpRequestオブジェクトをインスタンス化
var ajax = new XMLHttpRequest();
// イベントハンドラ−を使用。HTTPリクエスト通信が成功したら・・・
ajax.addEventListener('load', function() {
// result要素にレスポンス通信で返ってきたテキストを表示させる
result.textContent = this.responseText
// result.textContent = ajax.responseText
})
// HTTPリクエスト通信の形式を指定して初期化する
ajax.open('get', './sample.txt');
// 通信開始
ajax.send()
</script>
</body>
</html>
これで、sample.txtに記述されているテキストをブラウザ上に表示させることが可能です。
XMLHttpRequest【get通信】の使用例
複数のLP(ランディングページ)で、同一コンテンツがある場合など使用すると便利です。
XMLHttpRequestを使わない場合
Twitterの引用などで、更新の度に、各LPのHTMLを更新しないといけない。
XMLHttpRequestを使う場合
共通ファイルを作成し、それをget通信で読み込ませる。
→1ファイルの更新だけで、全LPに反映可能。
言うなれば、WordPressのheader.phpやfooter.phpのように、1ファイルの修正だけで全ページに反映することができて大変便利です。
注意点
同一ドメインのみ適用可能
CORS(Cross Origin Resouce Sharing)指定があり、同一ドメインでしか使うことができません。
したがって、別サイトのコンテンツを表示させることはできません。
consoleを開くと、以下のようなエラー表示となります。

まとめ
本記事では、「【サンプルコードあり】XMLHttpRequestの使い方【get通信編】」について以下のことをお伝えしました。
- ファイルを準備する
- 実装する
- 反映画面を確認
- コードを解説
- XMLHttpRequest【get通信】の使用例
- 注意点
手元でコードを書いて、ブラウザで確認することで理解が促進されるので、ぜひ試してみて下さい。
参考
本記事執筆にあたり、参考にさせていただいた記事・書籍です。
XMLHttpRequestの使い方(1)
https://wp-p.info/tpl_rep.php?cat=js-practice&fl=r16『JavaScript本格入門』