1. XMLHttpRequest对象
在浏览器中,最开始与服务器交换数据的方式则是通过XMLHttpRequest对象。【它可以使用JSON、XML、HTML和Text文本等格式发送和接收数据。】
优点:
1.不重新加载页面的情况下更新网页
2.在页面已加载后从服务器请求/接收数据
3.在后台向服务器发送数据。
缺点:
1.使用起来也比较繁琐,需要设置很多值。
2.早期的IE浏览器有自己的实现,这样需要写兼容代码。
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 {
// TODO 处理响应
if (xhr.readyState === XMLHttpRequest.DONE) {
// XMLHttpRequest.DONE 对应值是 4
// Everything is good, the response was received.
if (xhr.status === 200) {
// Perfect!
} else {
// There was a problem with the request.
// For example, the response may hava a 404 (Not Found)
// or 500 (Internal Server Error) response code.
}
} else {
// Not ready yet
}
} catch (e) {
// 通信错误的事件中(例如服务器宕机)
alert('Caught Exception: ' + e.description)
}
}
2. jQuery $.ajax
为了更快捷的操作DOM,并且规避一些浏览器兼容问题,产生了jQuery。【它里面的AJAX请求也兼容了各浏览器,可以有简单易用的方法
.post。简单点说,就是对XMLHttpRequest对象的封装。】
优点:
1.对原生XHR的封装,做了兼容处理,简化了使用。
2.增加了对JSONP的支持,可以简单处理部分跨域。
缺点:
1.如果有多个请求,并且有依赖关系的话,容易形成回调地狱。
2.本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
3**.ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery**非常的不合理。
$.ajax({
type: 'POST',
url: 'http://users/mine',
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})
3. axios
Axios是一个基于promise的HTTP库,可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装,只不过它是Promise的实现版本,符合最新的ES规范。
【Vue2.0之后,尤雨溪推荐大家使用axios来请求数据。】
优点:
1.从浏览器中创建XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
缺点:
1.只持现代代浏览器.
axios({
method: 'post',
url: '/users/mine',
data: {
firstName: 'yang',
lastName: 'daxiu'
}
})
.then(res => console.log(res))
.catch(err => console.log(err))
4. fetch
Fetch API提供了一个 JavaScript 接口,用于访问和操作HTTP管道的部分,例如请求和响应。它还提供了一个全局fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。
fetch是低层次的API,代替XHR,可以轻松处理各种格式,非文本化格式。可以很容易的被其他技术使用,例如Service Workers。但是想要很好的使用fetch,需要做一些封装处理。
fetch('http://users/mine.json')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
优势:
跨域的处理,在配置中,添加mode: 'no-cors’就可以跨域了
fetch('/mine.json', {
method: 'post',
mode: 'no-cors',
data: {}
}).then(function() { /* 操作事件 */ });
fetch目前遇到的问题:
1.fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
2.fetch默认不会带cookie,需要添加配置项。
3.fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。
4.fetch没有办法原生监测请求的进度,而XHR可以。
请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记:
-. 当接收到一个代表错误的 HTTP 状态码时,
从 fetch()返回的 Promise 不会被标记为 reject,
即使该 HTTP 响应的状态码是 404 或 500。
相反,它会将 Promise 状态标记为 resolve
(但是会将 resolve的返回值的 ok 属性设置为 false ),
仅当网络故障时或请求被阻止时,才会标记为 reject。
-. 默认情况下,
fetch 不会从服务端发送或接收任何 cookies,
如果站点依赖于用户 session,
则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。