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通信は基本的に以下の手順で行う。

  1. new XMLHttpRequest()でインスタンスを生成する。
  2. openメソッドで送信時のメソッド,送信先URLを指定する。
  3. 必要に応じて,応答種別をresponseTypeプロパティで空文字列 (""), "arraybuffer", "blob", "document", "json", "text"から指定する。
  4. 必要に応じて,要請のHTTPヘッダーをsetRequestHeaderメソッドで追加する。
  5. sendメソッドで要請を送信する。引数にはHTTPメソッドがPOSTの場合のみHTTP本体を文字列で指定する。
  6. load/error/progressのいずれかのイベントにコールバックを登録して応答を処理する。
  7. 必要に応じて,応答のHTTPヘッダーをgetResponseHeader/getAllResponseHeadersメソッドで取得する。

なお,onloadのイベントハンドラーが存在しなかった昔は,onreadystatechengeを使っていた。以下のようにハンドラー内でreadyStateをチェックして,状態を確認していた。過去のコードでよく見かける。

xhr.onreadystatechange = function() {
  if (xhr.readyState == 3) {
    // loading
  }
  if (xhr.readyState == 4) {
    // request finished
  }
};

今はload/error/progressのハンドラーを使う。

その他,昔のスクリプトは応答の取得にresponseTextresponseXMLを使っていた。今はresponseTypeで形式を指定してからresponseで取得する。テキスト応答でよければresponseTypeを指定しなくてもよい。

実装例を以下に掲載する。同じ内容のサンプルコード確認ページをGitHubでも公開している。

[XMLHttpRequest] ボタンを選択するとこのページのHTMLが表示される。

実装は以下となる。

XMLHttpRequestの使用例
<!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件のコメントがあります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です