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

XMLHttpRequest.response - レスポンスの内容

responseは、XMLHttpRequestのプロパティです。レスポンスの内容を返します。型はresponseTypeによって変わります。

概要

名前
response
所属
XMLHttpRequest
IDL
readonly attribute any response;
仕様書
https://xhr.spec.whatwg.org/#dom-xmlhttprequest-response

説明

レスポンスの内容を返す。responseTypeの値と、内容が一致しない場合、nullを返すことがある。詳しくは、responseTypeの説明をご参考下さい。

デモ

XMLHttpRequest.responseのデモです。textarea要素内にresponseの値を出力します。

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

<!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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月23日 (月)
コンテンツを公開しました。