现代浏览器,最开始与服务器交换数据,都是通过 XMLHttpRequest
对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。
if (window.XMLHttpRequest) { // model browser
xhr = new XMLHttpRequest()
} else if (window.ActiveXObject) { // IE 6 and older
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.open('POST', url, true)
xhr.send(data)
xhr.onreadystatechange = function () {
try {
// 处理响应
if (xhr.readyState === 4) {
// 请求正常
if (xhr.status === 200) {
// 处理响应
} else {
// 请求遇到一些问题,处理异常
}
} else {
// 还处于未准备好的状态
}
} catch (e) {
// 通信错误的事件中(例如服务器宕机)
alert('Caught Exception: ' + e.description)
}
}
优点:
- 不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求/接收数据
- 在后台向服务器发送数据。
缺点:
- 使用起来也比较繁琐,需要设置很多值。
- 早期的IE浏览器有自己的实现,这样需要写兼容代码。
2. jQuery ajax
为了更快捷的操作 DOM,并且规避一些浏览器兼容问题,产生了 jQuery
。它里面的 AJAX
请求也兼容了各浏览器,可以有简单易用的方法 $.get
, $.post
。简单点说,就是对 XMLHttpRequest
对象的封装。
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})
优点:
XHR JSONP
缺点:
- 如果有多个请求,并且有依赖关系的话,容易形成回调地狱。
- 本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
- ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。
3. fetch
Fetch
API提供了一个 JavaScript
接口,用于访问和操作HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()
方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
fetch
是底层API,代替 XHR
,可以轻松处理各种格式,非文本化格式。可以很容易的被其他技术使用,例如 Service Workers
。但是想要很好的使用 fetch
,需要做一些封装处理。
fetch('http://example.com/movies.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
优点:跨域的处理
在配置中,添加mode: 'no-cors'就可以跨域了
fetch('/users.json', {
method: 'post',
mode: 'no-cors',
data: {}
}).then(function() { /* handle response */ });
缺点:
-
fetch
只对网络请求报错,对400
,500
都当做成功的请求,需要封装去处理 -
fetch
默认不会带cookie
,需要添加配置项。 -
fetch
不支持abort
,不支持超时控制,使用setTimeout
及Promise.reject
的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。 -
fetch
没有办法原生监测请求的进度,而XHR
可以。
请注意, fetch
规范与 jQuery.ajax()
主要有三点不同,牢记:
- 当接收到一个代表错误的 HTTP 状态码时,从
fetch()
返回的Promise
不会被标记为reject
, 即使该 HTTP 响应的状态码是404
或500
。相反,它会将Promise
状态标记为resolve
(但是会将resolve
的返回值的ok
属性设置为false
),仅当网络故障时或请求被阻止时,才会标记为reject
。 -
fetch()
不会接受跨域cookies
;你也不能使用fetch()
建立起跨域会话。其他网站的Set-Cookie
头部字段将会被无视。 -
fetch
不会发送cookies
。除非你使用了credentials
的 初始化选项。(自2017年8月25日以后,默认的credentials
策略变更为same-origin
。Firefox也在61.0b13版本中,对默认值进行修改)
4. axios
axios
是一个基于 promise
的HTTP库,可以用在浏览器和 node.js
中。它本质也是对原生 XMLHttpRequest
的封装,只不过它是 Promise
的实现版本,符合最新的ES规范。
这是官方的并发案例:
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
axios是尤雨溪大神推荐使用的,
优点:
XMLHttpRequests node.js Promise API JSON XSRF
缺点:
- 只持现代代浏览器.