Ajax

前端程序员常说的Ajax是 Asynchronous JavaScript and XML的缩写，意思是异步网络请求。区别于传统web开发中采用的同步方式。

Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好。

传统web请求方式：

使用Ajax后请求：

Jquery的ajax：

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

实现一个Ajax请求

在现代浏览器上实现一个Ajax请求是非常容易的

var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象//ajax是异步的，设置回调函数
request.onreadystatechange = function () { // 状态发生变化时，函数被回调if (request.readyState === 4) { // 成功完成// 判断响应状态码if (request.status === 200) {// 成功，通过responseText拿到响应的文本:return success(request.responseText);} else {// 失败，根据响应码判断失败原因:return fail(request.status);}} else {// HTTP请求还在继续...}
}// 发送请求:
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();//到这一步，请求才正式发出

使用原生的js还是比较繁琐，实际工程中建议使用jQuery之类的库，封装的ajax请求方法非常好用，且解决了浏览器兼容性的问题。

axios

首先需要知道：axios不是一种新的技术。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

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

浏览器支持

axios面向现代浏览器设计，所以古老的浏览器并不支持。

因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合。

axios({method: 'post',url: '/user/12345',data: {firstName: 'Fred',lastName: 'Flintstone'}
})
.then(function (response) {console.log(response);
})
.catch(function (error) {console.log(error);
});

fetch

fetch是前端发展的一种新技术产物。

以下内容摘自mozilla：
Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

在使用fetch的时候需要注意：

当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject，即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

一个使用fetch获取数据的例子

fetch('http://example.com/movies.json').then(function(response) {return response.json();}).then(function(myJson) {console.log(myJson);});

fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重。

axios, ajax和fetch的比较相关推荐

理解 ajax、fetch和axios
背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...
[vue] ajax、fetch、axios这三都有什么区别？
[vue] ajax.fetch.axios这三都有什么区别? ajax, 实际上就是xmlHttpRequest, 旧瓶装新酒的一种新应用的称呼 fetch是新出的规范, 具体实现原理不太清楚, 但 ...
ajax、fetch和axios的比较
AJAX.Fetch.axios AJAX AJAX可以在不更新全局的情况下更新局部页面.通过在与服务器进行数据交换,可以使网页实现异步更新. AJAX的原理就是通过XHR对象来向服务器发起异步请求, ...
axios ajax和flask传输json数据
axios ajax和flask传输json数据视频 https://www.bilibili.com/video/BV1WC4y1b78y?p=23 https://www.bilibili.co ...
Vue使用Axios Ajax封装渲染页面
接口文档约定: baseURL: http://127.0.0.1:9999 返回参数: {"code": 1, "msg":"新增数据失败!&qu ...
Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
怎么中断一个ajax请求,ajax、fetch、axios如何中断请求？
先来说一说"中断请求"的实际场景,当页面有多个tab页签时,每次切换页签都会去请求数据,频繁的切换就会去请求很多次,比如A页签切换到B页签,A页签请求完全是不必要的,这时候可以在切 ...
ajax和fetch哪个好,axios和ajax，fetch的区别
1,传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回 ...
Ajax请求，JQuery发送请求，Axios请求，Fetch请求总结
常见的请求方式 1.Ajax请求定义: 同步与异步的区别: Ajax的工作原理: 实现AJAX的基本步骤: Get请求: Post请求: 2.JQuery发送请求 Get请求: Post请求: 3. ...

axios, ajax和fetch的比较