XMLHttpRequestのJavaScriptでの使用方法
XMLHttpRequest (XHR) はクライアントスクリプトからサーバーにHTTP通信するためのAPIだ。Web APIへのアクセスに必要なHTTP通信をプログラム上で行うため，XHRの使用方法を整理する。
概要
XHRは基本的にWebブラウザーでのみ使用可能なAPIだ。JavaScriptからHTTP通信を行うためのAPIの一つとして使われる。
XHRの他にはFetchやWebSocketのAPIが存在する。XHRよりはFetchのほうがモダンであり，こちらの利用が推奨されている。しかし，XHRは昔から使われており，既存コードにXHRを使ったサンプルが多いため，まずはこちらの使い方を学ぶ。
仕様はWHATWGでLiving Standard (XMLHttpRequest Standard (Commit Snapshot 22424f0eed9696a935fb441e8cede66517fc5490)) として定義されている。2020-01-21 Tue時点では2019-09-24が最新なのでAPI仕様はこれを参考にする。ありがたいことにそこまで文量は多くない。
なお，XMLHttpRequestと先頭にXMLとあるが，これは歴史的な経緯によるもので，今はXMLとは関係ないらしい。
以下の2サイトの情報を参考に学ぶ。
手順
XMLHttpRequestを使ったHTTP通信は基本的に以下の手順で行う。
new XMLHttpRequest()でインスタンスを生成する。openメソッドで送信時のメソッド，送信先URLを指定する。- 必要に応じて，応答種別を
responseTypeプロパティで空文字列 (""), "arraybuffer", "blob", "document", "json", "text"から指定する。 - 必要に応じて，要請のHTTPヘッダーを
setRequestHeaderメソッドで追加する。 sendメソッドで要請を送信する。引数にはHTTPメソッドがPOSTの場合のみHTTP本体を文字列で指定する。load/error/progressのいずれかのイベントにコールバックを登録して応答を処理する。- 必要に応じて，応答のHTTPヘッダーを
getResponseHeader/getAllResponseHeadersメソッドで取得する。
なお，onloadのイベントハンドラーが存在しなかった昔は，onreadystatechengeを使っていた。以下のようにハンドラー内でreadyStateをチェックして，状態を確認していた。過去のコードでよく見かける。
xhr.onreadystatechange = function() {
if (xhr.readyState == 3) {
// loading
}
if (xhr.readyState == 4) {
// request finished
}
};今はload/error/progressのハンドラーを使う。
その他，昔のスクリプトは応答の取得にresponseTextやresponseXMLを使っていた。今はresponseTypeで形式を指定してからresponseで取得する。テキスト応答でよければresponseTypeを指定しなくてもよい。
例
実装例を以下に掲載する。同じ内容のサンプルコードと確認ページをGitHubでも公開している。
[XMLHttpRequest] ボタンを選択するとこのページのHTMLが表示される。
実装は以下となる。
<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta charset="UTF-8" />
<title>XMLHttpRequest</title>
</head>
<body>
<p><button id="xhr-button">XMLHttpRequest</button></p>
<textarea id='xhr-result' style="width: 50%; height: 10em;"></textarea>
<script>
// <![CDATA[
let button = document.getElementById("xhr-button");
button.onclick = function() {
// 1. Create XMLHtpRequest instance.
let xhr = new XMLHttpRequest();
// 2. Set HTTP requet property.
xhr.open('GET', location.href);
// 3. Send HTTP request.
xhr.send();
// 4. Handle HTTP response.
xhr.onload = function() {
let result = document.getElementById('xhr-result');
if ((xhr.status < 200) || (400 <= xhr.status)) {
result.value = `Error ${xhr.status}: ${xhr.statusText}`;
return;
}
result.value = xhr.response;
};
};
// ]]>
</script>
</body>
</html> 手順で示した順番でコードを実装している。GETメソッドで現在表示中のURLを要請し，HTTP本体をtextarea要素に出力している。
onloadに指定しているコールバック関数内で，statusプロパティから応答のステータスコードを確認し，問題なければ応答の本体を取得している。
HTTPメソッドにPOSTを指定して，HTTP本体にパラメーターを指定することでWeb APIへのアクセスも可能となる。都合の良いPOSTを受け付けるWeb APIをまだ知らなかったのでこちらの例は掲載していない。
結論
簡単な例であったがXMLHttpRequestの使い方を学んだ。XHRを使うことで，JavaScriptからのWeb APIへのアクセスが可能となり，できることが格段に広がる。
XHRを使ったWeb APIへのアクセスもどこかで挑戦したい。
“XMLHttpRequestのJavaScriptでの使用方法” に対して1件のコメントがあります。