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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- XMLHttpRequest.responseText
- responseTextは、XMLHttpRequestのプロパティです。レスポンスの内容を文字列で返します。
- XMLHttpRequest.responseType
- responseTypeは、XMLHttpRequestのプロパティです。レスポンスの種類を返します。値を指定することで、レスポンスをその型として解釈します。
- XMLDocument
- XMLDocumentは、XMLドキュメントを管理するための機能を備えたインターフェイスです。内容は、Documentと同じです。
- XMLHttpRequest
- XMLHttpRequestは、ajax通信を管理するための機能を備えたインターフェイスです。