Axios和Ajax的区别是什么(axios和ajax的关系)

Axios和Ajax的区别是什么 一、Axios 和 Ajax 的区别

推荐整理分享Axios和Ajax的区别是什么(axios和ajax的关系)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:axios 和ajax,axios和ajax的区别面试题,axios和ajax的区别在哪里,ajax和ashx,web前端三大主流框架,axions和ajax的区别,axions和ajax的区别,web前端三大主流框架,内容如对您有帮助，希望把文章链接给更多的朋友！

1、Axios是一个基于Promise的HTTP库，而Ajax是对原生XHR的封装；

2、Ajax技术实现了局部数据的刷新，而Axios实现了对ajax的封装。

二、Axios 和 Ajax 的区别及优缺点Ajax：1、什么是Ajax

Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。

异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高用户体验。

2、Ajax的原理？

由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器作出一系列响应之后返回给ajax引擎，由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。

3、核心对象？

XMLHttpReques

4、Ajax优缺点？

   优点　

1、无刷新更新数据

2、异步与服务器通信

3、前端和后端负载平衡

4、基于标准被广泛支持

5、界面与应用分离

   缺点：

1、ajax不能使用Back和history功能，即对浏览器机制的破坏。

2、安全问题 ajax暴露了与服务器交互的细节

3、对收索引擎的支持比较弱

4、破坏程序的异常处理机制

5、违背URL和资源定位的初衷

6、ajax不能很好的支持移动设备

7、太多客户端代码造成开发上的成本

5、Ajax适用场景

<1>.表单驱动的交互 <2>.深层次的树的导航 <3>.快速的用户与用户间的交流响应 <4>.类似投票、yes/no等无关痛痒的场景  <5>.对数据进行过滤和操纵相关数据的场景 <6>.普通的文本输入提示和自动完成的场景

6、Ajax不适用场景

<1>.部分简单的表单 <2>.搜索 <3>.基本的导航 <4>.替换大量的文本 <5>.对呈现的操纵

7、代码$.ajax({ type: 'get', url: '/getuser/data', dataType: 'json', data: { firstName: '张', lastName: '三' }, success: function (response) { console.log(response); }, error: function (error) { console.log(error); }});<script type="text/javascript"> function login() { $.ajax({ type: 'post', url: '/email/login', dataType: 'json', data: { 'account': $('#account').val(), 'password': $('#password').val() }, success: function (data) { if (data.code == 1) { alert("登录成功"); window.location.href = "http://localhost:8080/email/success"; } else { alert("密码错误，请重新输入！") window.location.href = "http://localhost:8080/email/error" } } }) }</script><script type="text/javascript"> function addFruit() { let name = $.trim($("#fname").val()); let price = $.trim($("#fprice").val()); let count = $.trim($("#fcount").val()); $.post("http://localhost:8080/fruit/add", {name: name, price: price, count: count}, function (data) { if (data.code == 1) { alert(data.message); window.location.href = "http://localhost:8080/fruit/index"; } if (data.code == 0) { alert(data.message); } }); } function delFruit(id) { if (window.confirm("是否确认删除" + id + "?")) { $.post("http://localhost:8080/fruit/delete?id=" + id, {id: id}, function (data) { if (data.code == 1) { alert(data.message); window.location.href = "http://localhost:8080/fruit/index"; } if (data.code == 0) { alert(data.message); } }); } }</script>8、Ajax请求的五个步骤

1. 创建XMLHttpRequest异步对象

2. 设置回调函数

3. 使用open方法与服务器建立连接

4. 向服务器发送数据

5. 在回调函数中针对不同的响应状态进行处理

Axios：1、Axios是什么

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2、Axios有那些特性？

1、在浏览器中创建 XMLHttpRequests

2、在node.js则创建http请求

3、支持Promise API

4、支持拦截请求和响应

5、转换请求和响应数据

6、取消请求

7、自动转换成JSON数据格式

8、客户端支持防御XSRF

3、执行get请求，有两种方式

params 是用于拼接 url 的，get 请求传参就是拼到 url 中，

而 data 是放在 request body 中的，用于 post 请求

// 第一种写法:将参数直接写在url中axios.get('/query?name=tom').then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});// 第二种写法:将参数直接写在params中axios.get('/query', { params: { name: 'tom' }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});// 第三种写法:将参数直接写在params中axios({ method: 'get', url: '/query', params: { name: 'tom', }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});4、执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。axios.post('/query', { name: 'tom', icon: 'img_path'}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});

 下面这种data方式将参数放在请求体中，后端需要使用@RequestBody +实体类来接收。

axios({ url: '/getUsers', method: 'post', responseType: 'json', // 默认的 data: { age: 18, sex: '男', } }).then(function (response) { console.log(response); console.log(response.data); }).catch(function (error) { console.log(error); });

这种params传参方式其实和get请求类似，把请求参数放到了请求头中，http://127.0.0.1/user?age=18&sex=男 所以这种需要使用@RequestParam来接收参数

axios({ url: '/getUsers', method: 'post', responseType: 'json', // 默认的 params: { age: 18, sex: '男', } }).then(function (response) { console.log(response); console.log(response.data); }).catch(function (error) { console.log(error); });三、Axios和Ajax的区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

注： 传统Ajax 指的是 XMLHttpRequest（XHR），axios和jQuer ajax都是对Ajax的封装。