前端知识FE

AJax - Xhr & Fetch

2015-11-08  本文已影响1076人  KeKeMars

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

XHR

XHR对象

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

XHR对象的请求及相应

request

xhr2

response

xhr2

XHR对象的事件

XHR对象的状态

代码

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数据(图片)

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 从头开始创建新的文本文件，并将该 Blob 上传到服务器。该代码还设置了一个处理程序，用于通知用户上传进度：

<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上传字节：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分割文件并上传各个部分

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);

})();

参考

fetch

fetch() 方法用于发起获取资源的请求。它返回一个 promise，这个promise会在请求响应后被resolve，并传回 Response 对象。

当遇到网络错误时，fetch() 返回的 promise 会被 reject，并传回 TypeError，虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误。

可以使用isomorphic-fetch进行前后端同构应用

语法

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

返回值 一个 Promise，resolve 时回传 Response 对象。

代码示例

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-caniusefetch-caniuse
需要引入下面polyfill后完美支持IE8+
  1. 由于 IE8 是 ES3，需要引入 ES5 的 polyfill: es5-shim, es5-sham
  2. 引入 Promise 的 polyfill: es6-promise
  3. 引入 fetch 探测库：fetch-detector
  4. 引入 fetch 的 polyfill: fetch-ie8
  5. 可选：如果你还使用了 jsonp，引入 fetch-jsonp
  6. 可选：开启 Babel 的 runtime 模式，现在就使用 async/await

坑

不足

参考

上一篇下一篇

猜你喜欢

热点阅读