前端多媒體（2）—— xhr異步接收處理二進制數據

有時咱們須要把遠程的視頻、圖片數據異步下載下來，而後在js裏進行特殊處理。好比把VR的圖片特殊處理，把不一樣封裝格式的視頻作一次 轉封裝 處理等等，這類操做都要先獲取二進制數據，而後特殊處理。

這個時候就須要用到 XMLHttpRequest 2.0 的 responseType 屬性了。XMLHttpRequest.responseType 屬性是一個枚舉值，經過它能夠指定返回響應的類型。

常見的類型有

• arraybuffer: 二進制數據
• blob：二進制大對象，好比圖片、視頻
• document： xml數據類型
• json：返回數據會用被解析爲JSON
• text （文本形式）

這裏 ArrayBuffer 和 Blob 都是二進制數據，可是二者是不一樣的，ArrayBuffer和Blob建立後不能修改，除非新建另外一個，可是 Blob 對象能夠指定創MINE類型，ArrayBuffer能夠做爲Blob構造器的參數傳。

readyState

值	狀態	描述
0	UNSENT (未打開)	open()方法還未被調用.
1	OPENED (未發送)	send()方法還未被調用.
2	HEADERS_RECEIVED (已獲取響應頭)	send()方法已經被調用, 響應頭和響應狀態已經返回.
3	LOADING (正在下載響應體)	響應體下載中; responseText中已經獲取了部分數據.
4	DONE (請求完成)	整個請求過程已經完畢.

responseType = 'text'

這種狀況下返回的數據會以文本形式得到，而且xhr.responseText這個屬性裏得到數據

var xhr = new XMLHttpRequest();

xhr.open('GET', './assets/text');
xhr.responseType = 'text';
xhr.send();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4 && xhr.status == 200){
    alert(xhr.responseText);
  }
}

點擊這裏查看demo https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_document.html

responseType = 'document'

在這種事狀況下了瀏覽器將返回的數據解析爲xml形式。可是要注意http的response header 的 Content-Type:text/xml 不然瀏覽器沒法識別這種數據格式。而後得到的數據會在 xhr.responseXML 裏。

var xhr = new XMLHttpRequest();

xhr.open('GET', './assets/document.xml');
xhr.responseType = 'document';
xhr.send();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4 && xhr.status == 200){
    alert(xhr.response.getElementById('name').textContent)
  }
}

請求的數據爲

<?xml version="1.0" encoding="utf-8"?>
<document>
  <name id="name">young cowboy</name>
</document>

點擊這裏查看demo https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_document.html

responseType = 'json'

這種狀況下返回的數據會以json體現。數據會在xhr.response字段中。

var xhr = new XMLHttpRequest();

xhr.open('GET', './assets/json');
xhr.responseType = 'json';
xhr.send();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4 && xhr.status == 200){
    alert(JSON.stringify(xhr.response, null, 2))
  }
}

json

{"name": "yuoung cowboy"}

注意若是返回的數據不合法的話。是沒法獲取數據的。

demo點擊這裏https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_json.html

responseType = 'blob'

Blob這個概念是通用的計算機概念指的是大塊的二進制數據，好比視頻、圖片。更多的例子和講解會在後續的文章中體現。

在demo中我使用了一張圖片，而後把它保存爲一張沒有擴展名的文件。

<img id="image">
<script type="text/javascript">
  var xhr = new XMLHttpRequest();

  xhr.open('GET', './assets/blob');
  xhr.responseType = 'blob';
  xhr.send();
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
      console.log(xhr.response instanceof Blob); // true
      document.getElementById('image').src = URL.createObjectURL(xhr.response); // 這裏設置一個張圖片
    }
  }
</script>

注意，這裏使用了一個API，URL.createObjectURL。它能夠建立一個連接指向內存中的Blob對象。

demo 能夠點擊這裏 https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_blob.html

responseType = 'arraybuffer'

ArrayBuffer 表示二進制數據的原始緩衝區，他指向內存中的一段數據。它的大小，一般是固定的，也就是在你初始化的時候就決定了。ArrayBuffer自己是不能讀寫的，須要藉助類型化數組或DataView對象來解釋原始緩衝區。

Typed Arrays JavaScript中新出現的一個概念，專爲訪問原始的二進制數據而生。更多關於ArrayBuffer 、 Blob等等處理二進制數據的方法的資料，請關注後續的博客。這裏再也不展開講解。

仍是和以前同樣使用一張圖片的二進制數據。只不過在返回的數據類型中，設置爲arraybuffer。而後再說沒有對數據進行作一次包裝。

<img id="image">
<script type="text/javascript">
  var xhr = new XMLHttpRequest();

  xhr.open('GET', './assets/arraybuffer');
  xhr.responseType = 'arraybuffer';
  xhr.send();
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4 && xhr.status == 200){
      var blob = new Blob([xhr.response], {type: 'image/png'});

      document.getElementById('image').src = URL.createObjectURL(blob); // 這裏設置一個張圖片
    }
  }
</script>

demo https://young-cowboy.github.io/gallery/XMLHttpRequest_responseType/response_arraybuffer.html

參考資料

• 理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型
• XMLHttpRequest.responseType
• Blob