XMLHttpRequest.responseType 允许我们手动的设置返回数据的类型，如果服务器所返回的类型和你所设置的返回值类型不兼容，response为 null，即使服务器返回了数据。
1642063389(1).jpg
服务器返回了数据，Content-Type 为 application/octet-stream
1642063520(1).jpg
1642063718(1).jpg
还有一个要注意的是，给一个同步请求设置responseType会抛出一个InvalidAccessError 的异常。
ie浏览器 xmlhttp.responseType = "blob" 放在 xmlhttp.open 前面会报错 （谷歌不会）
报错图片
error.jpg
报错代码
error-code.jpg
不报错图片
1642062287(1).jpg
正确代码
1642062515(1).jpg
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<video id="video" src="/ff7bb04b22364c0d97a3ba9703ffcdd9/file" controls width="400" height="400" >
</video>
<script>
var xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",'/ff7bb04b22364c0d97a3ba9703ffcdd9/file',true);
xmlhttp.responseType = "blob"
xmlhttp.send(null)
function state_Change() {
if (xmlhttp.readyState==4) {// 4 = "loaded"
if (xmlhttp.status==200) {// 200 = OK
console.log(xmlhttp);
var video = document.querySelector('#video')
console.log(new Blob([xmlhttp.response], {type: 'video/mp4'}));
var src = window.URL.createObjectURL(new Blob([xmlhttp.response], {type: 'video/mp4'}));
video.src = src
video.onload = function() {
window.URL.revokeObjectURL(src);
}
} else{
alert("Problem retrieving XML data");
}
}
}
</script>
</body>
</html>
网友评论