非同期通信を行う（Ajax）

非同期通信を行うには、XMLHttpRequestオブジェクトを使用します。
XMLHttpRequestは最初の設計がMicrosoftで行われ、のちにMozillaやNetscape、Appleのブラウザが採用し、2004年にW3Cより正式に定義・標準化されました。

XMLHttpRequestでは基本的に同じドメインの間でのみ通信が可能ですが、XMLHttpRequest Level2というバージョンからリクエスト先がクロスドメイン（異なるドメイン）であっても通信が可能になりました。
ただし、リクエスト先ドメインのサーバから許可を得ていることが条件となります。
クロスドメインでの処理については、ページ内の 「クロスドメインでの通信について」を参照してください。

  • ※ Internet Explorerは7以降で対応（ただし、ActiveXObjectもIE7では対応している）
    Internet Explorer 6以下ではActiveXObjectによって対応
  • ※ UTF-8以外を読み込むとレスポンスヘッダーにcharset情報が含まれない場合、文字化けします。

構文

var xhr = new XMLHttpRequest();

イベント

イベント名 説明
onreadystatechange readyState属性が変化するたびに呼び出されるイベント。
ontimeout タイムアウトするたびに呼び出されるイベント。
onabort 通信が中断された時に呼び出されるイベント。
イベントハンドラ
onload 読み込み完了時に呼び出されるイベント。
onerror 読み込みにエラーが発生した時に呼び出されるイベント。
onprogress 読み込み中（レスポンスボディが受信されたとき）に繰り返し呼び出されるイベント。
第一引数ではloaded（進捗率）プロパティ、total（最大）プロパティを持つオブジェクトを返す。

プロパティ

プロパティ名 説明
readyState 通信状態。
0～4で表した数値を返す。
readyStateプロパティの戻り値
status HTTPステータスコード。
responseText 通信が成功した時のレスポンスを文字列で返す。
responceXML 通信が成功した時のレスポンスをXMLとして解析し返す。
responseType responseText、responceXML以外のタイプの場合で指定。
responseTypeプロパティの設定可能値
response responseTypeで指定した結果を返す。

メソッド

メソッド名 説明
open(method, url, async, authUserName, authPassword) リクエストの初期化。 第一引数：HTTPメソッド（GET, POSTなど）
第二引数：リクエストURL
第三引数：非同期で処理するかどうか
          true = 非同期, false = 同期
          省略した場合はtrue
第四引数：認証がある場合のユーザー名
第五引数：認証がある場合のパスワード
setRequestHeader(name, value) リクエストするヘッダー。
第一引数：ヘッダーの種類
第二引数：値
overrideMimeType(MIMEType) MIME Typeを指定。
第一引数：MIMEタイプ
send(body) リクエストの送信（通信の開始）。
第一引数：POSTでリクエストする場合の送るデータ
          データはURLパラメータをURLエンコードした文字列
abort() 通信を中断する。
getResponseHeader(name) レスポンスヘッダーを1つ取得。
第一引数：ヘッダーの種類
getAllResponseHeaders() レスポンスヘッダーをすべて取得。

readyStateプロパティの戻り値

戻り値 説明
0 XMLHttpRequest オブジェクトを作成した直後
1 openメソッドの呼び出しが完了
2 レスポンスヘッダーの受信が完了
3 レスポンスボディを読み込み中（受信中）
4 通信が完了（成功・失敗に限らず）

responseTypeプロパティの設定可能値

設定値 説明
'text' テキストを読み込んで文字列を返す
'document' XMLを読み込んでDocumentオブジェクトを返す
'arraybuffer' バイナリを読み込んでArrayBufferオブジェクトを返す
'blob' バイナリを読み込んでBlobオブジェクトを返す
'json' JSONを読み込んでObjectオブジェクトを返す

サンプルコード

JavaScript

var xhr = new XMLHttpRequest();

// リクエストの準備
xhr.open('get', 'https://example.co.jp/', true);

// ヘッダーの追加
xhr.setRequestHeader('User-Agent', 'Sample');

// 送信
xhr.send(null);
  • ※ setRequestHeaderメソッドを使う際は、setRequestHeaderメソッドをopenメソッドの後に記述する必要があります。

キャッシュの無効化

一度通信を行うと、2回目以降はキャッシュが有効となりレスポンスの内容が更新されないことがあります。
そこで次のコードのようにキャッシュを無効化することができます。

JavaScript

xhr.setRequestHeader('Pragma', 'no-cache'); // HTTP/1.0用
xhr.setRequestHeader('Cache-Control', 'no-cache'); // HTTP/1.1用
xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT'); // キャッシュの日付を過去に設定（主にIE用）

IE6以下の対応について

IE6以下ではXMLHttpRequestに対応していないため、代わりにActiveXObjectを使用して実装します。
繰り返して使う場合などでは、毎回分岐処理で書くと面倒なので関数にしてまとめます。

関数定義

JavaScript

var createXMLHttpRequest = function() {
	if (XMLHttpRequest) {
		return new XMLHttpRequest();
	} else {
		// IE6以下用
		try {
			return new ActiveXObject('Msxml2.XMLHTTP.6.0');
		} catch (e) {}
		try {
			return new ActiveXObject('Msxml2.XMLHTTP.5.0');
		} catch (e) {}
		try {
			return new ActiveXObject('Msxml2.XMLHTTP.4.0');
		} catch (e) {}
		try {
			return new ActiveXObject('Msxml2.XMLHTTP.3.0');
		} catch (e) {}
		try {
			return new ActiveXObject('Msxml2.XMLHTTP');
		} catch (e) {}
		try {
			return new ActiveXObject('Microsoft.XMLHTTP');
		} catch (e) {}
	}

	return null;
};

IE6以下の対策でActiveXObjectのXMLHTTPを使用しますが、いくつかのバージョンが存在しています。
参考：Microsoft XML パーサー (MSXML) のバージョン一覧

使い方

JavaScript

var xhr = new createXMLHttpRequest();

xhr.open('get', 'https://example.co.jp/', true);

xhr.send(null);

クロスドメインでの通信について

XMLHttpRequest Level2からクロスドメインでの通信が可能になりました。
ただしリクエスト先から許可を得ている必要があるのと、IE7以下には対応しないこと、IE8とIE9はXDomainRequestという別のオブジェクトで処理する必要があります。
IE10からはXMLHttpRequest Level2に対応しています。

リクエスト先からの許可

リクエスト先からの許可を得る場合は、リクエスト先のサーバの設定を変更する必要があります。
次のようにhtaccessなどで設定します。

htaccess

# Header set Access-Control-Allow-Origin "許可するURL（ドメインまで）"
Header set Access-Control-Allow-Origin "http://foo.co.jp"

IE8、IE9の場合

IE8、IE9はXDomainRequestという別のオブジェクトで処理する必要があります。

JavaScript

var CORSRequest = function(method, url) {
	var xhr = new XMLHttpRequest();

	if ('withCredentials' in xhr) {
		xhr.open(method, url, true);
	} else if (typeof XDomainRequest !== 'undefined') {
		xhr = new XDomainRequest();
		xhr.open(method, url);
	} else {
		xhr = null;
	}

	return xhr;
};

var xhr = CORSRequest('GET', 'https://example.com/search.json');

if (!xhr) throw new Error('CORS not supported');

xhr.onload = function() {};
xhr.onerror = function() {};

xhr.send();

Firefoxのエラーについて

responseTypeプロパティに"json"を指定するとFirefoxでは開発ツールのコンソールに次のエラーが表示されます。

これを回避するには、overrideMimeTypeメソッドを追加することで回避できます。

JavaScript

if (xhr.overrideMimeType) {
	xhr.overrideMimeType('text/plain; charset=UTF-8');
}
  • ※ overrideMimeTypeメソッドはopenメソッドの前に記述します。
  • ※ charsetの値は必要に応じて変更してください。

JavaScript逆引きリファレンス一覧へ戻る