Wiki_JS_XHR - inoueshinichi/Wiki_Web GitHub Wiki

XMLHttpRequestの基本

URL

概要

  • 非同期通信 (旧: XMLHttpRequest, 新: fetch API)
  • XMLHttpRequestオブジェクトは, パラメータ設定により同期通信も可能.
  • 通信に使用できるボディのデータ構造は, "arraybuffer", "blob", "json", "document"(xml), "text"

XMLHttpRequest

  • クライアントとサーバーの間でデータを伝送するための機能をクライアント側で提供するAPI.
  • ページ全体(*.html)を再読み込みすることなく, URLからデータを読み出す簡単な方法を提供.
  • ユーザの作業を中断させることなくWebページの一部を更新することができる.

クラス図

XHRクラス継承

readyStateの種類

数値 状態 説明
0 UNSENT XHRオブジェクト作成直後
1 OPENED open()メソッドの呼び出し直後
2 HEADERS_RECEIVED レスポンスヘッダの受信直後
3 LOADING レスポンスボディを受信中(定期的に繰り返される)
4 DONE XHR通信完了後

プロパティ

プロパティ 型 内容
*.readState number 読み取り専用. リクエスト状態を示す数値.
*.responseType string or null "arraybuffer":ArrayBuffer, "blob": Blob, "document": Document(XML), "json": Json, "text": plane text
*.response ArrayBuffer or Blob or Document or JSON or string 読み取り専用. *.responseTypeで判別.
*.responseText string or null 読み取り専用. レスポンスボディを文字列で取得する. 失敗or未送信時null
*.responseXML Document or null 読み取り専用. レスポンスボディをDocumentで取得する. 失敗or未送信時null. ※ WebWorkerで使えない.
*.status number HTTPレスポンスのステータスコード
*.statusText string HTTPレスポンスステータスコードに対応した文字列.
*.timeout number リクエストを自動的に閉じるまでのタイムアウト時間. 単位ミリ秒
*.upload - XMLHttpRequestUploadでuploadプロセスを表す.
*.withCredentials boolean CORSのリクエスト時にクッキーや認証情報をヘッダーを介して渡すか否か
  • 受信した内容(ボディ)は, XMLHttpRequestオブジェクトのresponseプロパティで参照できる.

標準外のプロパティ

プロパティ 型 内容
*.channel number 読み取り専用. リクエスト実行の際にオブジェクトによって使われるチャネル.
*.mozAnon boolean 読み取り専用. リクエストをクッキーや認証ヘッダーなしで送信.
*.mozSystem boolean 読み取り専用. 同一オリジンポリシーはリクエストで適用されない.
*.mozBackgroundRequest boolean このオブジェクトがバックグラウンドサービスのリクエストを表しているか否か

インスタンスメソッド

メソッド 戻り値の型 内容
*.abort() void リクエストが既に送信されている場合、リクエストを中止する.
*.getAllResponseHeaders() string or null すべてのレスポンスヘッダーをCRLF区切りで文字列として返す. レスポンスを受け取っていない場合, null.
*.open() void リクエストの初期化
*.overrideMimeType() void サーバから帰ってくるMIMEタイプを上書きする
*.send() void リクエストを送信(非同期が規定). 制御がすぐに戻り, レスポンス到着時にCallbackが実行される
*.setRequestHeader() void HTTPリクエストヘッダーを指定する

コールバックイベント

メソッド 戻り値の型 内容
*.onabort void リクエスト送信中止時
*.onerror void リクエスト失敗時(受信完了)
*.onload void リクエスト成功時(受信完了)
*.onloadend void load,abort,errorいずれのイベントの後にも発生するイベント(finally相当).
*.onloadstart void リクエストがデータを読み込み始めた時. open()メソッドが呼ばれたとき.
*.onprogress void リクエストが複数チャンクに分割されてレスポンスを受信するときに定期的に発生
*.onreadystatechange void readSatateプロパティが変化する時
*.ontimeout void リクエストのタイムアウト時

データを受信する onreadystatechangeイベント

  • 非同期通信なので受信時用のハンドラを設定する
  • XMLHttpRequestオブジェクトが通信している間に, 状況が変化したときに何度も呼び出されるイベント
  • readyStateプロパティから状況を確認する
xhr.onreadystatechange = function() {
  if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
    for (let i = 0; i < this.response.length; i++) {
      let data = this.response[i];

      let imgElem = document.createElement('img');
      imgElem.setAttribute('src', data.path);
      imgElem.setAttribute('width', data.width);
      imgElem.setAttribute('height', data.height);
      
      let captionElem = document.createElement('div');
      captionElem.className = 'inner';
      captionElem.innerHTML = '<p>' + data.memo + '<span>' + data.date + '</span></p>';

      let divElem = document.createElement('div');
      divElem.className = 'photo';
      divElem.appendChild(imgElem);
      divElem.appendChild(captionElem);

      document.getElementById('img_unit').appendChild(divElem);
    }
   }
  };

受け取るデータ(responseType)を指定

プロパティ値 データ型
text DOMString
arraybuffer arraybuffer
blob blob
document Document
json JSON

実装例

const xhr = new XMLHttpRequest();

// リクエスト初期化
xhr.open('GET', url, /*非同期*/true /*同期*/false);

// リクエストヘッダーの設定
xhr.setRequestHeader("Key1", "Value1");
xhr.responseType = "json"; // "arraybuffer", "blob", "document", "json", "text"

// コールバック設定 (下記, 4つを設定しないとレスポンスの取りこぼしが発生する場合があるので注意)
xhr.onload = (e) => { ... };
xhr.onerror = (e) => { ... };
xhr.abort = (e) => { ... };
xhr.timeout = (e) => { ... }

// xhr.onload = (e) => { ... }; は下記と同じ
// xhr.addEventListener("load", (e) => { ... });

// HTTPリクエストを送信
xhr.send(ボディ値 or null(ボディなし));
⚠️ **GitHub.com Fallback** ⚠️