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

XMLHttpRequest.responseType - レスポンスの種類

responseTypeは、XMLHttpRequestのプロパティです。レスポンスの種類を返します。値を指定することで、レスポンスをその型として解釈します。

概要

名前
responseType
所属
XMLHttpRequest
IDL
attribute XMLHttpRequestResponseType responseType;

enum XMLHttpRequestResponseType {
  "",
  "arraybuffer",
  "blob",
  "document",
  "json",
  "text"
};
仕様書
https://xhr.spec.whatwg.org/#dom-xmlhttprequest-response

説明

レスポンスの型を、下記のリストから指定します。

""
初期値。ユーザーエージェントによる自動判別。
"arraybuffer"
responseの型は、ArrayBufferとなる。
"blob"
responseの型は、Blobとなる。
"document"
responseの型は、Documentとなる。ただし値がHTML、またはXMLとして解釈できない場合、nullとなる。
"json"
responseの型は、JSONフォーマットのObjectとなる。ただし値がJSONとして解釈できない場合、nullとなる。
"text"
responseの型は、文字列となる。

デモ

XMLHttpRequest.responseTypeのデモです。ファイルとresponseTypeの値を選択して、ajax通信を実行してみて下さい。同じファイルでも、値によって取得できる内容が違います。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; tab-size: 2 ; }
div#result { white-space: pre-wrap ; }
textarea#fuga { box-sizing: border-box ; width: 100% ; font-size: 16px ; }
</style>
</head>
<body>
<p>
	<input type="radio" name="file" value="demo.txt" checked><a href="./demo.txt" target="_blank">demo.txt</a> (text/plain)
	<input type="radio" name="file" value="demo.html"><a href="./demo.json" target="_blank">demo.json</a> (application/json)
	<input type="radio" name="file" value="demo.html"><a href="./demo.html" target="_blank">demo.html</a> (text/html)
	<input type="radio" name="file" value="image.png"><a href="./image.png" target="_blank">image.png</a> (image/png)
</p>
<hr>
<p>
	<label><input type="radio" name="responseType" value="" checked>""</label>
	<label><input type="radio" name="responseType" value="arraybuffer">"arraybuffer"</label>
	<label><input type="radio" name="responseType" value="blob">"blob"</label>
	<label><input type="radio" name="responseType" value="document">"document"</label>
	<label><input type="radio" name="responseType" value="json">"json"</label>
	<label><input type="radio" name="responseType" value="text">"text"</label>
</p>
<hr>
<p><button id="send">通信 [send()]</button></p>
<hr>
<img src="" id="hoge" width="120" height="auto">
<hr>
<textarea rows="15" id="fuga"></textarea>
<hr>
<div id="result"></div>
<script>
var xhr ;
var fileName = "demo.txt" ;
var responseType = "" ;
xhrSetting() ;

document.getElementById( "send" ).onclick = function () {
	xhr.open( "GET", "./" + fileName ) ;
	xhr.responseType = responseType ;
	xhr.send() ;
}

function xhrSetting () {
	xhr = new XMLHttpRequest() ;

	xhr.onloadstart = function ( event ) {
		document.getElementById( "result" ).textContent = document.getElementById( "hoge" ).src = document.getElementById( "fuga" ).value = "" ;
		appendText( "[loadstart] ダウンロードを開始しました!!" + "\n" ) ;
	}

	xhr.onprogress = function ( event ) {
		appendText( "[progress] ダウンロード中…" + "\n" ) ;
	}

	xhr.onload = function ( event ) {
		appendText( "[load] ダウンロードが正常に完了しました!!" + "\n" ) ;
	}

	xhr.onloadend = function ( event ) {
		appendText( "[loadend] ダウンロードを終了しました!!" + "\n" ) ;
		console.log( xhr ) ;
		xhrSetting() ;
	}

	xhr.onerror = function ( event ) {
		appendText( "[error] ダウンロードに失敗しました…。" + "\n" ) ;
	}

	xhr.addEventListener( "load", function ( event ) {
		var response = xhr.response ;
		document.getElementById( "fuga" ).value = ( response === null ? "null" : response ) ;

		if ( xhr.responseType === "blob" ) {
			var blobUrl = URL.createObjectURL( response ) ;
			document.getElementById( "hoge" ).src = blobUrl ;
		}
	} ) ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}

for( var elements=document.getElementsByName( "file" ),l=elements.length,i=0; l>i; i++ ) {
	elements[i].onclick = function ( event ) {
		fileName = event.target.value ;
	}
}

for( var elements=document.getElementsByName( "responseType" ),l=elements.length,i=0; l>i; i++ ) {
	elements[i].onclick = function ( event ) {
		responseType = event.target.value ;
	}
}
</script>
</body>
</html>

サポート状況

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
responseType
arraybuffer 6+ 10+ 11.6+ 6.0+ 4.0+
blob 18+ 6+ 7.1+ 15+ 7.0+ 4.4+
document 18+ 6+ 6.0+ 10+ 15+ 6.0+ 4.0+
json 31+ 10+ 7.1+× 18+ 8.3+×
text 6+ 10+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月23日 (月)
コンテンツを公開しました。