Javascript

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

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

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

「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本格入門』

ABOUT ME
大城ゆう
エンジニア歴5年。 大学卒業後、フィールドエンジニア職に就くがその後のキャリアに不安を感じ、ゼロスキルからWEBデザイナーに転職。 その後WEB制作会社、東証一部上場企業のECサイト担当を経て、現在は自社開発企業のWEBコーダーとして仕事に従事。