【サンプルコードあり】XMLHttpRequestの使い方【get通信編】

生徒

JavaScriptのHTTP通信ってよく分からないんだよな。実際にブラウザで動くコードのサンプルってないのかな？

このような悩みの解決記事です。

「XMLHttpRequestがどのような挙動をするか」を理解するには、ブラウザで動かすのが一番です。

私自身概念は理解していたのものの、実際にどのような動きをするかを理解するには時間がかかりました。

そこで本記事では、サンプルコードを用いてXMLHttpRequestがどのように動くのかを確認したいと思います。

ぜひ、実際にコードを書いて挙動を確認してみて下さい。

Contents

ファイルを準備する
実装する
反映画面を確認
コードを解説
XMLHttpRequest【get通信】の使用例
- 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に記述されているテキストをブラウザ上に表示させることが可能です。