SYNCERのロゴ
アイキャッチ画像

XMLHttpRequest - ajax通信

XMLHttpRequestは、ajax通信を管理するための機能を備えたインターフェイスです。

概要

名前
XMLHttpRequest
継承
IDL
[Constructor,
 Exposed=(Window,DedicatedWorker,SharedWorker)]
interface XMLHttpRequest : XMLHttpRequestEventTarget {
  // event handler
  attribute EventHandler onreadystatechange;

  // states
  const unsigned short UNSENT = 0;
  const unsigned short OPENED = 1;
  const unsigned short HEADERS_RECEIVED = 2;
  const unsigned short LOADING = 3;
  const unsigned short DONE = 4;
  readonly attribute unsigned short readyState;

  // request
  void open(ByteString method, USVString url);
  void open(ByteString method, USVString url, boolean async, optional USVString? username = null, optional USVString? password = null);
  void setRequestHeader(ByteString name, ByteString value);
           attribute unsigned long timeout;
           attribute boolean withCredentials;
  [SameObject] readonly attribute XMLHttpRequestUpload upload;
  void send(optional (Document or BodyInit)? body = null);
  void abort();

  // response
  readonly attribute USVString responseURL;
  readonly attribute unsigned short status;
  readonly attribute ByteString statusText;
  ByteString? getResponseHeader(ByteString name);
  ByteString getAllResponseHeaders();
  void overrideMimeType(DOMString mime);
           attribute XMLHttpRequestResponseType responseType;
  readonly attribute any response;
  readonly attribute USVString responseText;
  [Exposed=Window] readonly attribute Document? responseXML;
};

typedef EventHandlerNonNull? EventHandler;

typedef (Blob or BufferSource or FormData or URLSearchParams or ReadableStream or USVString) BodyInit;

enum XMLHttpRequestResponseType {
  "",
  "arraybuffer",
  "blob",
  "document",
  "json",
  "text"
};

callback EventHandlerNonNull = any (Event event);

typedef (ArrayBufferView or ArrayBuffer) BufferSource;

typedef (Int8Array or Int16Array or Int32Array or Uint8Array or Uint16Array or Uint32Array or Uint8ClampedArray or Float32Array or Float64Array or DataView) ArrayBufferView;
仕様書
https://xhr.spec.whatwg.org/#xmlhttprequest

チュートリアル

XMLHttpRequestはコンストラクタで作成します。

var xhr = new XMLHttpRequest() ;

あるURLにGETメソッドのリクエストを送信する例です。ajax通信は同一オリジンポリシーの制約を受けることにご注意下さい。レスポンスを受信するには、XMLHttpRequestEventTargetのイベントハンドラを利用します。

xhr.open( "GET", "https://example.com/hoge.txt" ) ;

xhr.onload = function () {
	console.log( xhr.response ) ;	// ファイルの内容
}

xhr.send() ;

POSTメソッドでサーバー側にデータをアップロードすることも可能です。送信するデータはsend()の引数にします。アップロード時にもイベントを設定できます。それにはXMLHttpRequestUploadを利用します。

xhr.open( "POST", "https://example.com/regist.php" ) ;

var xhrUpload = xhr.upload ;	// XMLHttpRequestUpload

xhrUpload.onload = function () {
	console.log( "アップロード完了!!" ) ;
}

xhr.send( "name=arayutw&age=18" ) ;

コンストラクタ

XMLHttpRequest()

新しいXMLHttpRequestのオブジェクトを作成します。

プロパティ

readyState

通信の状態を表す数値を返します。この数値は、定数に対応しています。

response

レスポンスの内容を返します。

responseText

レスポンスの内容を文字列で返します。

responseType

レスポンスの種類を返します。値を指定することで、レスポンスをその型として解釈します。

responseURL

最終的にレスポンスがあったURLを返します。

responseXML

レスポンスの内容をXMLDocumentで返します。

status

レスポンスのステータスコードを返します。

statusText

レスポンスのステータスのメッセージを返します。

timeout

ajax通信に時間制限を設定できます。

upload

アップロード状況を管理するためのXMLHttpRequestUploadを返します。

withCredentials

クロスオリジンのajax通信で、リクエストに認証情報を含めるか否かを設定できます。

メソッド

abort()

ajax通信を中止します。

getAllResponseHeaders()

レスポンスヘッダーを全て取得します。

getResponseHeader()

レスポンスヘッダーを1つ取得します。

open()

通信先やメソッドなど、ajax通信の通信方法を設定します。

overrideMimeType()

mime typeを上書きします。

send()

ajax通信を実行します。

setRequestHeader()

ajax通信で任意のリクエストヘッダーを追加します。

定数

DONE

4を返します。この値は、通信が終了した状態であることを表します。

HEADERS_RECEIVED

2を返します。この値は、通信を開始後、レスポンスヘッダーを受信した状態であることを表します。

LOADING

3を返します。この値は、レスポンスヘッダーを受信した後、コンテンツをダウンロードしている状態であることを表します。

OPENED

1を返します。この値は、open()で通信先の設定がされ、まだsend()で通信を開始していない状態であることを表します。

UNSENT

0を返します。この値は、オブジェクトが作成され、まだopen()で通信先の設定がされていない状態であることを表します。

イベント

onreadystatechange

通信の状態が変化した時に発火します。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
XMLHttpRequest
abort()
DONE
getAllResponseHeaders()
getResponseHeader()
HEADERS_RECEIVED
LOADING
onreadystatechange 7+
open()
OPENED
overrideMimeType()
readyState
response
responseText
responseType
responseURL 37+ 32+ 9.1+× 30+ 9.1+×
responseXML
send()
setRequestHeader()
status
statusText
timeout 29+ 12+ 7.1+ 16+ 7.0+
UNSENT
upload
withCredentials
XMLHttpRequest()
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月9日 (月)
コンテンツを公開しました。