こんにちは!シミダイ(@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(pure JavaScript)でAjaxを動作させるためのコード
- index.html
1 2 3 4 5 6 7 8 9 10 11 12 |
<!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」を使用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
(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
1 |
これはテストです。 |
単純なテキストファイルになります。
Ajaxコードの解説
JQueryを使用しない場合に使用する「XMLHttpRequest」の解説します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
(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」ファンクション内でサーバーからの処理を書いていきます。