Axios和Ajax的区别是什么(详细介绍)
一、Axios 和 Ajax 的区别
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的封装。
到此这篇关于Axios和Ajax的区别是什么的文章就介绍到这了,更多相关Axios和Ajax的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Hello 大家好！这个ajax系列教程讲到这里已经完成50%了．第4篇讲了ajax向数据库添加数据，第5篇讲了ajax修改数据库中的数据．今天我们来讲ajax添加数据与删除并存的实例效果．2010-10-10
Ajax创建XMLHttp对象的完美兼容性代码，需要的朋友可以参考下。2011-11-11
下面是ajax实现一个简单的百度搜索栏的功能，当用户在上面的输入框中键入字符时，会执行函数 "showHint()" 。下文通过实例代码给大家介绍的非常详细，感兴趣的朋友一起看看吧2016-11-11
随着AJAX在互联网上的广泛运用，公司也在越来越多的项目里涉及到了AJAX，最近一段时间空闲，于是就用JS写了一个基于AJAX的异步分页类。先不多说，还是先将源码贴出，再进行说明~~~2009-09-09
这篇文章主要给大家介绍了关于利用ajax传递数组及后台接收的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-06-06
用ajax实现用户名的检测，提示是否重复的实现代码。2009-11-11
jQuery Ajax相关文章想必大家在网上面已经看到了很多，本文主要目的是整理jQuery Ajax相关内容，感兴趣的朋友可以了解下，或许本文对你有所帮助2013-02-02
下面小编就为大家带来一篇ajax快速解决参数过长无法提交成功的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
今天小编就为大家分享一篇快速解决ajax返回值给外部函数的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了webform使用ajax访问后端接口的两种方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
最新评论