why: 为什么会出现不同的方法呢?

what: 这些都是异步请求数据的方法。在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。

how:他们都有各自的特点。

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请求也兼容了各浏览器,可以有简单易用的方法$.get$.post。简单点说,就是对XMLHttpRequest对象的封装。

$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})

优点

  1. 对原生XHR的封装,做了兼容处理,简化了使用。
  2. 增加了对JSONP的支持,可以简单处理部分跨域。

缺点

  1. 如果有多个请求,并且有依赖关系的话,容易形成回调地狱。
  2. 本身是针对MVC的编程,不符合现在前端MVVM的浪潮。
  3. ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。

3. axios

Axios是一个基于promiseHTTP库,可以用在浏览器和 node.js 中。它本质也是对原生XMLHttpRequest的封装,只不过它是Promise的实现版本,符合最新的ES规范。

axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'liu',
lastName: 'weiqin'
}
})
.then(res => console.log(res))
.catch(err => console.log(err))

Vue2.0之后,尤雨溪大大推荐大家使用axios来请求数据。

优点

  1. 从浏览器中创建XMLHttpRequests
  2. node.js 创建 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换 JSON 数据
  8. 客户端支持防御 XSRF

缺点

  1. 只持现代代浏览器.

4. 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目前遇到的问题

  1. fetch只对网络请求报错,对400500都当做成功的请求,需要封装去处理
  2. fetch默认不会带cookie,需要添加配置项。
  3. fetch不支持abort,不支持超时控制,使用setTimeoutPromise.reject的实现超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。
  4. fetch没有办法原生监测请求的进度,而XHR可以。

请注意,fetch规范与jQuery.ajax()主要有两种方式的不同,牢记:

-. 当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ),仅当网络故障时或请求被阻止时,才会标记为 reject

-. 默认情况下,fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)。

参考

  1. MDN-使用Fetch
  2. 看云-axios使用说明
  3. jQuery ajax()
  4. XMLHttpRequest

异步请求xhr、ajax、axios与fetch的区别比较的更多相关文章

  1. 第三篇,ajax 和 axios、fetch的区别

    1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () ...

  2. 异步请求之ajax

    一.初识ajax 1.下载引入jQuery <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"& ...

  3. 异步请求(ajax,http) 之 逐渐完善的大全

    异步请求在我们的开发之中是经常需要学习和理解的内容,我们将会在这一篇文章中依据不同的语言和环境内容进行归类讲解. JS: ajax是我们最为常用的页面异步请求,在只需要修改部分页面内容而不需要更换全部 ...

  4. ajax和axios、fetch的区别

    参考文章: https://www.jianshu.com/p/8bc48f8fde75 Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题. fetch是用来取代传统的 ...

  5. 网页的异步请求(Ajax)

    JS原生Ajax操作(XMLHttpRequest) GET请求 var xmld=new XMLHttpRequest(); xmld.open("GET","wan. ...

  6. jquery的几种异步请求,ajax

    http://blog.csdn.net/a5489888/article/details/8523316

  7. vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...

  8. Ajax异步请求-简单模版

    <script type="text/javascript"> window.onload = function () { document.getElementByI ...

  9. 异步请求Ajax(取得json数据)

    异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异 ...

随机推荐

  1. SQL SERVER 之快照复制,事务复制,合并复制

    一.环境要求及说明 1.快照复制和事务复制是单向的(2005及以后的版本中加入了订阅端可更新的事务复制). 2.合并复制是双向的. 3.快照复制对表结构没有要求. 4.事务复制要求表有主键. 5.合并 ...

  2. 数据库读写分离Master-Slave

    数据库读写分离Master-Slave 一个平台或系统随着时间的推移和用户量的增多,数据库操作往往会变慢,这时我们需要一些有效的优化手段来提高数据库的执行速度:如SQL优化.表结构优化.索引优化.引擎 ...

  3. Mysql常用的查询语句,记录一下,好东西大家共享

    一查询数值型数据: SELECT * FROM tb_name WHERE sum > 100; 查询谓词:>,=,<,<>,!=,!>,!<,=>,= ...

  4. 跟着大彬读源码 - Redis 1 - 启动服务,程序都干了什么?

    一直很羡慕那些能读 Redis 源码的童鞋,也一直想自己解读一遍,但迫于 C 大魔王的压力,解读日期遥遥无期. 相信很多小伙伴应该也都对或曾对源码感兴趣,但一来觉得自己不会 C 语言,二来也不知从何入 ...

  5. MagicBook屏幕频闪解决方案(Windows、MacOS)

    对于已经看到这篇文章的小伙伴们,就不解释何为PWM调光频闪了. MagicBook笔记本性价比高,但屏幕素质确实很一般,我们人眼看不出来的频闪,实际对眼睛损害很大,如图(需要设置快门参数,如1/400 ...

  6. Codeforces 755E:PolandBall and White-Red graph(构造+思维)

    http://codeforces.com/contest/755/problem/E 题意:给出n个点和一个距离d,让你在这个n个点的图里面构造一个子图,使得这个子图的直径和补图的直径的较小值为d, ...

  7. [常用命令]OSX命令

    在mac os下,如何通过命令行来下载网络文件?如果你没有安装或wget命令,那么可以使用curl工具来达到我们的目的. curl命令参数: curl ‘url地址’ curl [选项] ‘url地址 ...

  8. 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用

    先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...

  9. HiLoGenerator生成id

    using System.Linq; namespace Product.Host { public class HiLoGenerator { ; ; ; private object Sequen ...

  10. 哈夫曼编码与解码的C++实现:建立哈夫曼树、进行哈夫曼编码与解码

    最近完成了数据结构课程设计,被分到的题目是<哈夫曼编码和解码>,现在在这篇博文里分享一下自己的成果. 我在设计时,在网上参考了很多老师和前辈的算法和代码,向他们表示感谢!他们的成果给了我很 ...