Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）

XHR

XHR對(duì)象

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();    
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
}

XHR對(duì)象的請(qǐng)求及相應(yīng)

request

• xhr.setRequestHeader(header,value)
• xhr.open(method='GET/POST',url,async='true/false')
• xhr.send(DOMString/Document(XML)) //DOMString/Document(XML)僅用于POST

xhr2

• xhr.send(DOMString/Document/FormData/Blob/File/ArrayBuffer)

response

• xhr.responseText
• xhr.responseXML

xhr2

• xhr.responseType 'json/text/arraybuffer/blob/document'

XHR對(duì)象的事件

• xhr.onloald()
• xhr.onerror()

XHR對(duì)象的狀態(tài)

• xhr.onreadystatechange 當(dāng)readyState屬性改變時(shí)眉孩，就會(huì)調(diào)用該函數(shù)瞒斩。
• xhr.readyState 存有XMLHttpRequest的狀態(tài)。從0到4發(fā)生變化稠氮。
• 0: 請(qǐng)求未初始化
• 1: 服務(wù)器連接已建立
• 2: 請(qǐng)求已接收
• 3: 請(qǐng)求處理中
• 4: 請(qǐng)求已完成兄猩，且響應(yīng)已就緒
• xhr.status
• 200: "OK"
• 404: 未找到頁(yè)面

代碼

var xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();    
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
}
xhr.onreadystatechange=function() {
  if (xhr.readyState==4 && xhr.status==200){
    var jsonString = xhr.response.json();
    ...
  }
}

xhr.setRequestHeader(header,value);
xhr.open("GET",url,true);
xhr.send();

利用xhr2特性抓取BLOB數(shù)據(jù)(圖片)

BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
  if (this.status == 200) {
    var bb = new BlobBuilder();
    bb.append(this.response); // Note: not xhr.responseText

    var blob = bb.getBlob('image/png');
    ...
  }
};

xhr.send();

xhr2提交表單

<form id="myform" name="myform" action="/server">
  <input type="text" name="username" value="johndoe">
  <input type="number" name="id" value="123456">
  <input type="submit" onclick="return sendForm(this.form);">
</form>

function sendForm(form) {
  var formData = new FormData(form);

  formData.append('secret_token', '1234567890'); // Append extra data before send.

  var xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);

  return false; // Prevent page from submitting.
}

xhr2表單上傳文件

function uploadFiles(url, files) {
  var formData = new FormData();

  for (var i = 0, file; file = files[i]; ++i) {
    formData.append(file.name, file);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);  // multipart/form-data
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  uploadFiles('/server', this.files);
}, false);

xhr2上傳文件或 blob：xhr.send(Blob)
該示例使用 BlobBuilder API 從頭開(kāi)始創(chuàng)建新的文本文件茉盏，并將該 Blob 上傳到服務(wù)器鉴未。該代碼還設(shè)置了一個(gè)處理程序，用于通知用戶上傳進(jìn)度：

<progress min="0" max="100" value="0">0% complete</progress>
function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };

  xhr.send(blobOrFile);
}

// Take care of vendor prefixes.
BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;

var bb = new BlobBuilder();
bb.append('hello world');

upload(bb.getBlob('text/plain'));

xhr2上傳字節(jié)：xhr.send(ArrayBuffer)

function sendArrayBuffer() {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  var uInt8Array = new Uint8Array([1, 2, 3]);

  xhr.send(uInt8Array.buffer);
}

xhr2分割文件并上傳各個(gè)部分

window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder ||
                     window.BlobBuilder;

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };
  xhr.send(blobOrFile);
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  var blob = this.files[0];

  const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
  const SIZE = blob.size;

  var start = 0;
  var end = BYTES_PER_CHUNK;

  while(start < SIZE) {

    // Note: blob.slice has changed semantics and been prefixed. See http://goo.gl/U9mE5.
    if ('mozSlice' in blob) {
      var chunk = blob.mozSlice(start, end);
    } else {
      var chunk = blob.webkitSlice(start, end);
    }

    upload(chunk);

    start = end;
    end = start + BYTES_PER_CHUNK;
  }
}, false);

})();

參考

• XMLHttpRequest2 新技巧

fetch

fetch() 方法用于發(fā)起獲取資源的請(qǐng)求鸠姨。它返回一個(gè) promise铜秆，這個(gè)promise會(huì)在請(qǐng)求響應(yīng)后被resolve，并傳回 Response 對(duì)象讶迁。

當(dāng)遇到網(wǎng)絡(luò)錯(cuò)誤時(shí)连茧，fetch() 返回的 promise 會(huì)被 reject，并傳回 TypeError巍糯，雖然這也可能因?yàn)闄?quán)限或其它問(wèn)題導(dǎo)致啸驯。成功的 fetch() 檢查不僅要包括 promise 被 resolve，還要包括 Response.ok 屬性為 true祟峦。HTTP 404 狀態(tài)并不被認(rèn)為是網(wǎng)絡(luò)錯(cuò)誤罚斗。

可以使用isomorphic-fetch進(jìn)行前后端同構(gòu)應(yīng)用

語(yǔ)法

fetch(input[, init]).then(function(response) { ... });

• input URLString/RequestObj
• init(可選)
  一個(gè)配置項(xiàng)對(duì)象，包括所有對(duì)請(qǐng)求的設(shè)置宅楞≌胱耍可選的參數(shù)有：
• method: 請(qǐng)求使用的方法，如 GET厌衙、POST距淫。
• headers: 請(qǐng)求的頭信息，形式為 Headers 對(duì)象或 ByteString迅箩。
• body: 請(qǐng)求的 body 信息：可能是一個(gè) Blob溉愁、BufferSource、FormData饲趋、URLSearchParams 或者 USVString 對(duì)象拐揭。注意 GET 或 HEAD 方法的請(qǐng)求不能包含 body 信息。
• mode: 請(qǐng)求的模式奕塑，如 cors堂污、 no-cors 或者 same-origin。
• credentials: 請(qǐng)求的 credentials龄砰，如 omit盟猖、same-origin 或者 include。
• cache: 請(qǐng)求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.

返回值 一個(gè) Promise换棚，resolve 時(shí)回傳 Response 對(duì)象式镐。

代碼示例

var myImage = document.querySelector('img');
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' };

var myRequest = new Request('flowers.jpg');

fetch(myRequest,myInit).then(function(response) {
  ... 
});

// 也可以傳入:
var myRequest = new Request('flowers.jpg',myInit);

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});
// ES6 =>
fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e));
// ES7 async await
async function(){
  try {
  let response = await fetch(url);
  let data = await response.json();
  console.log(data);
  } catch(e) {
    console.log("Oops, error", e);
  }
}

兼容性

fetch-caniuse

1. 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
2. 引入 Promise 的 polyfill: es6-promise
3. 引入 fetch 探測(cè)庫(kù)：fetch-detector
4. 引入 fetch 的 polyfill: fetch-ie8
5. 可選：如果你還使用了 jsonp固蚤，引入 fetch-jsonp
6. 可選：開(kāi)啟 Babel 的 runtime 模式娘汞，現(xiàn)在就使用 async/await

坑

• Fetch 請(qǐng)求默認(rèn)是不帶 cookie 的，需要設(shè)置 fetch(url, {credentials: 'include'})
• 服務(wù)器返回 400夕玩，500 錯(cuò)誤碼時(shí)并不會(huì) reject你弦，只有網(wǎng)絡(luò)錯(cuò)誤這些導(dǎo)致請(qǐng)求不能完成時(shí)惊豺，fetch 才會(huì)被 reject。
• IE8 IE9的XHR不支持CORS跨域,推薦使用fetch-jsonp

不足

• 沒(méi)有獲取狀態(tài)方法：isRejected禽作，isResolved
• 缺少其它一些方法：always尸昧，progress，finally
• 不能中斷旷偿，沒(méi)有 abort烹俗、terminate、onTimeout 或 cancel 方法

參考

• 傳統(tǒng) Ajax 已死狸捅，F(xiàn)etch 永生
• GlobalFetch.fetch()