JavaScript

最終更新日:
公開日:

レシピ

Ajax

XMLHttpRequestオブジェクトのプロパティ、メソッド、イベント一覧

XMLHttpRequestオブジェクトで使用できるプロパティ、メソッド、イベントについて解説します。

目次

XMLHttpRequestオブジェクトについて

XMLHttpRequestオブジェクトはサーバーとの非同期通信を行うことができるJavaScriptの一種のWeb APIです。

この非同期通信はAjaxAsynchronous JavaScript + XML)と呼ばれ、HTML5が登場する以前から使われていました。
ページを再読み込みせずにコンテンツを更新したり、フォームなどのデータを送信することができます。

名称にXMLと付きますが、実際はXML形式以外のデータもやり取りすることができます。
もちろん画像ファイルやPDFファイルなども送信したり、反対にサーバーから受け取ったりすることも可能です。

XMLHttpRequestオブジェクトによるAjaxを使うとページを動的に表示できることから、現在も広く利用されています。
基本的な使い方として、サーバーから特定のデータをリクエストして受け取るときは以下のようなコードになります。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  // (1)XMLHttpRequestオブジェクトを作成
  const xhr = new XMLHttpRequest();

  // (2)メソッドと通信先を指定して、リクエストを送信する
  xhr.open( "post", "./js_sample/entry.php", true);
  xhr.send();

  // (3)通信状態を確認して、レスポンスとして受け取ったデータ(responseText)を出力する
  xhr.onreadystatechange = function() {
    if( xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
});

(1)でXMLHttpRequestオブジェクトのインスタンスを作成し、(2)で通信を開始します。
(3)では通信が正常に完了したかを確認してから、レスポンスデータが入っているresponseTextプロパティconsole.logメソッドでコンソールへ出力して完了です。

通信の状態はreadyStateプロパティから確認し、正常に完了したかはstatusプロパティに入っているHTTPステータスコードから確認することができるようになっています。

以降では、XMLHttpRequestオブジェクトが使うことのできるプロパティ、メソッド、イベントの内容をそれぞれ解説していきます。

プロパティ

XMLHttpRequestオブジェクトで使うことのできるプロパティ一覧です。
「読み取りのみ」が「○」になっているプロパティは値の取得のみ行うことができます。

プロパティ名内容読取のみ
onreadystatechangereadyStateプロパティの値が変わるたびに呼び出されるイベントハンドラ。
readyState

自動再生を開始する。有効のときはtrue、無効のときはfalse

定数状態
0UNSENTXMLHttpRequestオブジェクトのインスタンスが作成されてから、openメソッドを実行する前の状態。
1OPENEDopenメソッドを実行した後の状態。
2HEADERS_RECEIVEDsendメソッドを実行してレスポンスヘッダーを受け取った状態。
3LOADINGレスポンスボディ(データ)を受け取っている状態。
4DONEレスポンスの受け取りが完了してAjaxが終了した状態。Ajaxによる通信が成功したときと、失敗したときのいずれかの状態。
response通信先からのレスポンスデータ。レスポンスデータの受け取りがないときは空文字列が入る。
responseText通信先からのレスポンスデータが文字列で入る。レスポンスデータの受け取りがないときは空文字列が入る。
responseTypeレスポンスデータの形式が入る。sendメソッド実行前にデータ形式を文字列で指定することも可能。
responseURLレスポンスの送信元のURL。
responseXMLレスポンスとして受け取ったXML、またはHTMLが入る。レスポンスデータの受け取りがないときは「null」が入る。
statusレスポンスのHTTPステータスコード。値は整数で通信が成功したら「200」、通信先が見つからないときは「404」、サーバー側でエラーが起こったときは「500」などの値が入る。
statusText上記statusプロパティに応じたメッセージ。値は文字列で通信が成功したら「OK」、通信先が見つからないときは「Not Found」、サーバー側でエラーが起こったときは「Internal Server Error」などの値が入る。
timeoutリクエストがタイムアウト(終了)するまでの時間をミリ秒単位で指定。デフォルトはタイムアウトしない「0」が設定されている。
uploadデータを送信するときに送信状況を確認するためのXMLHttpRequestUploadオブジェクトを取得。
withCredentials異なるドメインと通信するときにCookieなどを使用して認証するかどうか。trueは認証する設定となり、それ以外はfalseを設定する。同じドメイン間での通信では、このプロパティの値は無視される。

メソッド

XMLHttpRequestオブジェクトで使うことのできるメソッドの一覧です。

メソッド名内容戻り値
abort()すでに送信したリクエスト(要求)をキャンセルする。キャンセルするとreadyStateプロパティの値は「0UNSENT)」がセットされ、そのまま通信を終了すると「4DONE)」がセットされる。undefined
getAllResponseHeaders()すべてのレスポンスヘッダーを文字列形式で取得。レスポンスヘッダーがない場合は戻り値がnullになる。CRLFで改行された文字列かnull
getResponseHeader()パラメータに指定したレスポンスヘッダーを文字列形式で取得。レスポンスヘッダーがない場合は戻り値がnullになる。文字列かnull。全てのレスポンスヘッダーを参照するときは上記のgetAllResponseHeadersメソッドを使用する。
open()新しいリクエストを作成する。第1パラメータに通信メソッド、第2パラメータに通信先のURL、第3パラメータに非同期通信を行うかどうかを指定する。通信先の認証プロセスを使用するときは第4パラメータにユーザー名、第5パラメータにパスワードを指定する。なし
overrideMimeType()リクエスト(要求)で送信するデータのMIMEタイプを指定。このメソッドはsendメソッドよりも前に呼び出す必要がある。undefined
send()openメソッドで指定したURLとの通信を開始する。リクエスト(要求)やデータを送信する。undefined
setRequestHeader()指定したリクエストヘッダーの値をセットする。第1パラメータにヘッダー、第2パラメータに値を指定する。このメソッドはsendメソッドよりも前に呼び出す必要がある。undefined

イベント

XMLHttpRequestオブジェクトで通信を行った際に発生するイベント一覧です。

イベント名発生するタイミング
onreadystatechangereadyStateプロパティの値が更新されるときに発生する。
abortabortメソッドを実行したときなど、リクエスト(要求)を途中でキャンセルしたときに発生する。
errorリクエスト(要求)を送信したときにエラーが起こったときに発生する。
loadリクエスト(要求)が正常に終了したときに発生する。
loadendリクエスト(要求)が完了したタイミングで発生する。通信が成功した場合、失敗した場合のいずれも発生する。
loadstartリクエスト(要求)した結果のデータを受け取り開始したタイミングで発生する。
progressリクエスト(要求)した結果のデータを受け取っている間に定期的に発生する。
timeoutリクエスト(要求)してから一定時間が経過して通信が途中で終了したタイミングで発生する。

発生したイベントを検出するときはaddEventListenerメソッドを使う方法と、イベントハンドラを使う方法の2種類があります。
以下の例ではイベントloadendに対して、それぞれの方法で発生を検出してconsole.logメソッドを実行します。

addEventListenerメソッドを使う場合

addEventListenerメソッドを使う方法では、発生を検出したいイベントをイベントリスナーに登録します。

JavaScript コード例

xhr.addEventListener('loadend', ()=> {
  console.log("Load End");
});

イベントハンドラを使う場合

イベントハンドラで発生したイベントを検出するときは、上記イベント一覧にあるイベント名の前に「on」を加えて設定します。
例えばイベント「loadend」であれば「onloadend」として、以下のように設定して使います。

JavaScript コード例

xhr.onloadend = () => {
  console.log("Load End");
};

他のイベントについても全く同じ方法で発生を検出して処理を実行することができます。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。