XMLHttpRequest.responseType 允許我們手動(dòng)的設(shè)置返回?cái)?shù)據(jù)的類型，如果服務(wù)器所返回的類型和你所設(shè)置的返回值類型不兼容，response為 null，即使服務(wù)器返回了數(shù)據(jù)。
1642063389(1).jpg
服務(wù)器返回了數(shù)據(jù)，Content-Type 為 application/octet-stream
1642063520(1).jpg
1642063718(1).jpg
還有一個(gè)要注意的是，給一個(gè)同步請(qǐng)求設(shè)置responseType會(huì)拋出一個(gè)InvalidAccessError 的異常。
ie瀏覽器 xmlhttp.responseType = "blob" 放在 xmlhttp.open 前面會(huì)報(bào)錯(cuò) （谷歌不會(huì)）
報(bào)錯(cuò)圖片
error.jpg
報(bào)錯(cuò)代碼
error-code.jpg
不報(bào)錯(cuò)圖片
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>
