素のJavaScriptでAJAX処理を書くには？

はじめに

素のJavaScriptで、AJAXの通信部分の処理をどう書くのか？
Vanilla JSにあるサンプルを解読してみました。

jQueryにどっぷりハマっている方向けかも知れません。

対象のコードはこちら

Vanilla JS

こちらからお借りしました。

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

上から読んでいきます

まず XMLHttpRequest オブジェクトから。

developer.mozilla.org

• XHRなどと略されるオブジェクト。AJAXでよく使われます。
• サーバーとの通信という意味では、選択肢はこれに限りません。
• 名前に反して、XMLじゃなくても、httpプロトコル以外も対応しています。

使い方ですが…
まずコンストラクタ XMLHttpRequest() を実行して、初期化する必要があります。

var r = new XMLHttpRequest();

r.open() はリクエストの初期化を行います。
developer.mozilla.org

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);

引数は前から順にメソッド、URL、非同期/同期 (true/false) です。
同期通信は多くのブラウザで非推奨とされているとのこと。

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};

r.onreadystatechange は、readystatechange イベント ( XMLHttpRequest の readyState 属性が変化)が発火するたびに呼ばれる EventHandler です。
構文はこんな感じ。

XMLHttpRequest.onreadystatechange = callback;

イベントが発火すると、callback に指定した関数が実行されます。

ではこの readyState 属性が何者かというと…
developer.mozilla.org

値	状態	説明
0	UNSENT	クライアントは作成済み。open() はまだ呼ばれていない。
1	OPENED	open() が呼び出し済み。
2	HEADERS_RECEIVED	send() が呼び出し済みで、ヘッダーとステータスが利用可能。
3	LOADING	ダウンロード中。responseText には部分データが入っている。
4	DONE	操作が完了した。

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};

4の状態は成否に関わらず処理が終わってます。
status 属性はHTTPステータスコードです。
つまり、処理が正常に終了したときだけ、レスポンスを alert 関数で出力するようになっています。

callback 関数の定義が終わったら、あとは r.send() でデータを送信します。
送ったあとは、サーバー側での処理を経て、callback 関数に落ち着くというわけですね。

var r = new XMLHttpRequest();
r.open("POST", "path/to/api", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  alert("Success: " + r.responseText);
};
r.send("banana=yellow");

さいごに

JavaScript はいろんなフレームワークやライブラリが出ておりますが、素の仕組みを知っておくことも大事ですよね。
と思ったのが今回のきっかけでした。
mozilla のサイトにマニュアルがあるので、調べるのに便利ですね。

また似たような記事を書くかも知れません。
以上でした！