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

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

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

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

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

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

Contents

1 Ajaxを動作させるファイル群
2 Ajaxの動作イメージ
3 生JavaScript（pure JavaScript）でAjaxを動作させるためのコード
4 Ajaxコードの解説

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

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

ajax.js
index.html
test.txt

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

/
├ js/
│　└ ajax.js
│
└ index.html
└ test.txt

Ajaxの動作イメージ

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

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

生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>

<!DOCTYPE html>

<html>

<head>

<title>Ajaxのテスト</title>

</head>

<body>

<div>これはAjaxのテストです。</div>

<button id="ajaxButton" type="button">要求を実行</button>

</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('リクエストに問題が発生しました');
}
}
}
})();

(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('リクエストに問題が発生しました');
}
}
}
})();