http://www.cnblogs.com/snandy/p/5076512.html
Ajax，2005年诞生的技术，至今已持续了 10 年。它是一种在客户端创建一个异步请求的技术，本质上它不算创新，是一组技术的组合。它的核心对象是 XMLHttpRequest。
简单回顾下历史
- 1996年，IE 中首先添加了 iframe 用来实现异步请求获取服务器内容
- 1998年，微软 Outlook 在客户端 script 中实现了 XMLHttp 对象
- 1999年，微软在 IE5 中添加了 XMLHTTP ActiveX 对象用来异步获取服务器内容，该对象直到 Edge 浏览器才废弃。其它浏览器陆续实现了类似的对象称为 XMLHttpReques。
- 2004年，Google Gmail 中大量使用 XMLHttpRequest
- 2005年，Google Map 中大量使用 XMLHttpRequest
- 2005年，Jesse James Garrett 发表了文章 "Ajax: A New Approach to Web Applications"，Ajax 诞生
- 2006年，XMLHttpRequest 被 W3C 采纳，最后更新时间是 2014年1月
使用步骤大概如下
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
xhr =
new
XMLHttpRequest();
xhr.open(
'GET'
,url);
xhr.onload =
function
() {
// To do with xhr.response
};
xhr.onerror =
() {
// Handling errors
};
xhr.send();
|
以上可以看出，XHR 使用 onXXX 处理，典型的 "事件模式"。
Fetch 目前还不是 W3C 规范，由whatag负责出品。与 Ajax 不同的是，它的 API 不是事件机制，而采用了目前流行的 Promise 方式处理。我们知道 Promise 是已经正式发布的 ES6 的内容之一。
fetch(
'doAct.action'
).then(
(res) {
if
(res.ok) {
res.text().then(
(obj) {
// Get the plain text
})
}
},
(ex) {
console.log(ex)
})
|
以上 fetch 函数是全局的，目前最新的Firefox，Chrome，Opera 都已支持，详见
以上是一个最简单的请求，只要传一个参数 url 过去，默认为 get 请求，获取纯文本，fetch 第二个参数可以进行很多配置，比如 POST 请求
"doAct.action"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,{
method:
"POST"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
headers: {
"Content-Type"
:
"application/x-www-form-urlencoded"
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.8em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px 1em!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:auto!important; white-space:Nowrap!important; background:none rgb(244,
body:
"keyword=荣耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela"
}).then(
(res) {
(res.ok) {
// To do with res
}
else
(res.status == 401) {
// To do with res
}
(e) {
// Handling errors
});
|
如果返回的是 JSON， 如下
res 实际上该规范定义的 Response 对象，它有如下方法
- arrayBuffer()
- blob()
- json()
- text()
- formData()
此外，Fetch 跨域请求时默认不会带 cookie，需要时得手动指定 credentials: 'include'
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,{credentials:
'include'
// ...
})
|
这和 XHR 的withCredentials 一样，只是withCredentials 只要设为 true。
相关：
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch
https://fetch.spec.whatwg.org
https://hacks.mozilla.org/2015/03/this-api-is-so-fetching