XMLHttpRequest level2介紹

原創

2020-02-21 12:25

1、xmlHttpRequest level1:

xmlHttpRequest是一個瀏覽器腳本語言，用來給server發送http或者https請求來加載，出於安全考慮，這個只能用於同域訪問(還有其他的缺點，比如說不能讀取或者上傳二進制文件，傳送和發送數據時沒有進度信息)。Xmlhttprequest概念的形成是源於微軟的outlook web access，後來使用這樣的概念形成了msxml庫，這就是爲什麼在以前的IE版本中通過依賴msxml庫的控件的形式創建一個XMLhttprequest對象，這個對象在1999年3月份由IE5引入，2006年10月在IE7中正式支持xmlhttprequest對象。

隨着jquery，dojo庫（框架）的興起，原生的xmlhttprequest對象更是慢慢地淡出了人們地視線，他們這些庫都是將xmlhttprequest進行了封裝，暴露出更加好用的方法。2008年2月，W3C推出了xmlhttprequest level2的草案，增加了很多新的特性，今天我們將詳細地介紹下這些特性。

首先，我們先回歸一下在最初的版本中是怎麼使用xmlhttprequest對象的。IE5和IE6是怎麼創建的：

var xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
其他的瀏覽器則通過 var xhr = new XMLHttpRequest()創建。

發送請求：

xhr.open(“GET”,”test1.txt”,true);//啓動一個請求準備發送
xhr.send(); //發送請求
接下來就是等待服務器的響應，這期間會有幾個狀態的變化，每個readyState的變化都會觸發下面的方法：

xhr.onreadystatechange = function(){
　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
　　　　　　alert( xhr.responseText );
　　　　} else {
　　　　　　alert( xhr.statusText );
　　　　}
　};
補充一點內容：

readyState的幾個狀態值(http的狀態請查看《http權威指南》)：

0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒
xhr返回的數據類型：

xhr.responseText：返回的文本數據
xhr.responseXML：返回XML格式的數據
xhr.statusText：返回狀態文本。
2、xmlHttpRequest level2

（後文說之的xhr對象之的是level2的）

(1)FormData

web中頻繁使用的就是表單數據的序列化了，Level2爲此定義了一個FormData,可以通過給這個對象設置的屬性，

var formData = new FormData();
formData.append(‘username’, ‘張三’);
formData.append(‘id’, 123456);
也可以使用表單數據預製FormData

var formData = new FormData(document.form[0]);
有了formDat後，就可以傳給xhr的send方法。使用FormData的方便之處就是不必明確地在xhr對象上設置頭部，即如下：

xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
注：xhr level1模擬提交表單數據時要加上上述語句，因爲post和web表單提交是不同的內容。

(2)timeout

timeout屬性最初是在IE8中引入的，後來也被w3c收入到了Level2的規範中，代碼片段如下：

xhr.open(“GET”,”test1.txt”,true)
xhr.timeout = 1000;//1秒後請求失效
xhr.ontimeout = function(){
}

(3)接受二進制數據

方法一:

改寫數據的MIMEType，將服務器返回的二進制數據僞裝成文本數據，並且告訴瀏覽器這是用戶自定義的字符集,然後，

用responseText屬性接收服務器返回的二進制數據。

xhr.overrideMimeType("text/plain; charset=x-user-defined");
var binStr = xhr.responseText;

這時，瀏覽器把它當做文本數據，所以還必須再一個個字節地還原成二進制數據

for (var i = 0, len = binStr.length; i &lt; len; ++i) {

　　　　var c = binStr.charCodeAt(i);
　　　　var byte = c & 0xff;
　　}

方法二：

使用新增的responseType屬性。如果服務器返回文本數據，這個屬性的值是”TEXT”，這是默認值。較新的瀏覽器還支持其他值，也就是說，可以接收其他格式的數據。你可以把responseType設爲 blob，表示服務器傳回的是二進制對象

var xhr = new XMLHttpRequest();

　　xhr.open(‘GET’, ‘/path/to/image.png’);
　　xhr.responseType = ‘blob’;
接收數據的時候，用瀏覽器自帶的Blob對象即可。

var blob = new Blob([xhr.response], {type: 'image/png'});

你還可以將responseType設爲arraybuffer，把二進制數據裝在一個數組裏。

var xhr = new XMLHttpRequest();

　　xhr.open(‘GET’, ‘/path/to/image.png’);
　　xhr.responseType = “arraybuffer”;
接收數據的時候，需要遍歷這個數組。

var arrayBuffer = xhr.response;

　　if (arrayBuffer) {
　　　　var byteArray = new Uint8Array(arrayBuffer);
　　　　for (var i = 0; i < byteArray.byteLength; i++) {
　　　　　　// do something
　　　　}
　　}

(4)進度信息

xhr level2對象在傳送數據的時候，有一個progress對象，用來返回進度信息，分爲上傳還下載兩種情況，下載的progress事件屬於

xmlhttprequest對象，上傳的屬於xmlhttprequest.upload對象

xhr.onprogress = updateProgress;
　xhr.upload.onprogress = updateProgress;
function updateProgress(event) {
　　　　if (event.lengthComputable) {
　　　　　　var percentComplete = event.loaded / event.total;
　　　　}
　　}
還有其他的事件類型：