JavaScript プログラミング

Ajaxを生JavaScirpt(pure javascirpt)で実装する方法

2018年7月23日

こんにちは!シミダイ(@shimidai2100)です。

生JavaScriptでAjaxを実装する方法」を紹介します。

JQueryを使うコーディング方法は多く紹介されていますが、生JavaScriptを使用した方法はまだまだ数が少ないです。

巷ではJQuery不要説が徐々に広まっていますので、この機会に生JavaScriptを使用した方法も学んでみてはいかがでしょうか?

ちなみに「ajax pure JavaScript」でググると英語では情報が出てきます。


Ajaxを動作させるファイル群

今回は以下を使用します。

  • ajax.js
  • index.html
  • test.txt

作成したファイルを以下のように配置します。

/
├ js/
│ └ ajax.js

└ index.html
└ test.txt

Ajaxの動作イメージ

今回のAjaxの動作イメージは以下になります。

サーバー上にある「test.txt」を取得させる簡単なプログラムになります。

生JavaScriptを使用したAjaxの動作イメージ図

生JavaScript(pure JavaScript)でAjaxを動作させるためのコード

  • index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ajaxのテスト</title>
  </head>
  <body>
    <div>これはAjaxのテストです。</div>
    <button id="ajaxButton" type="button">要求を実行</button>
    <script type="text/javascript" src="js/ajax.js"></script>
  </body>
</html>
  • ajax.js

JQueryを使用しない場合では、「XMLHttpRequest」を使用します。

(function() {
    var httpRequest;
    var ajaxButton = document.getElementById("ajaxButton");
    ajaxButton.addEventListener('click', makeRequest);

    function makeRequest(){
        httpRequest = new XMLHttpRequest();

        if (!httpRequest) {
            alert('中断:(XMLHTTP インスタンスを生成できませんでした)');
            return false;
        }
        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('GET', 'test.txt');
        httpRequest.send();
    }

    function alertContents(){
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('リクエストに問題が発生しました');
            }
        }
    }
})();
  • test.txt
これはテストです。

単純なテキストファイルになります。

Ajaxコードの解説

JQueryを使用しない場合に使用する「XMLHttpRequest」の解説します。

(function() {
    var httpRequest;
    var ajaxButton = document.getElementById("ajaxButton");
    ajaxButton.addEventListener('click', makeRequest);

    function makeRequest(){
        httpRequest = new XMLHttpRequest();

        if (!httpRequest) {
            alert('中断:(XMLHTTP インスタンスを生成できませんでした)');
            return false;
        }
        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('GET', 'test.txt'); // HTTPリクエストメソッド。第2引数はURLを指定
        httpRequest.send(); // サーバーPOSTするためのメソッド。今回は文字列データであるため不要
    }

    function alertContents(){
        if (httpRequest.readyState === XMLHttpRequest.DONE) { // 通信が完了(ステータス:4)
            if (httpRequest.status === 200) { // 
                alert(httpRequest.responseText);
            } else {
                alert('リクエストに問題が発生しました');
            }
        }
    }
})();

ボタンがクリックされると7行目の「XMLHttpRequest」でリクエスト用のオブジェクトを作成します。

13行目では「onreadystatechange 」でサーバーからの応答を処理する関数を呼び出します。

18行目の「alertContents」ファンクション内でサーバーからの処理を書いていきます。

 

関連記事

-JavaScript, プログラミング

Copyright© shimidai2100 , 2020 All Rights Reserved.