1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装;
2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。
Ajax是对原生XHR的封装,为了达到我们跨越的目的,增添了对JSONP的支持。
异步的javascript和xml,ajax不是一门新技术,而是多种技术的组合,用于快速的创建动态页面,能够实现无刷新更新数据从而提高用户体验。
由客户端请求ajax引擎,再由ajax引擎请求服务器,服务器作出一系列响应之后返回给ajax引擎,由ajax引擎决定将这个结果写入到客户端的什么位置。实现页面无刷新更新数据。
XMLHttpReques
优点
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>.对呈现的操纵
- $.ajax({
- type: 'get',
- url: '/getuser/data',
- dataType: 'json',
- data: {
- firstName: '张',
- lastName: '三'
- },
- success: function (response) {
- console.log(response);
- },
- error: function (error) {
- console.log(error);
- }
- });
1. 创建XMLHttpRequest异步对象
2. 设置回调函数
3. 使用open方法与服务器建立连接
4. 向服务器发送数据
5. 在回调函数中针对不同的响应状态进行处理
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
1、在浏览器中创建 XMLHttpRequests
2、在node.js则创建http请求
3、支持Promise API
4、支持拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换成JSON数据格式
8、客户端支持防御XSRF
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);
- });
- 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是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有,ajax有的axios不一定有,总结一句话就是axios是ajax,ajax不止axios。
注: 传统Ajax 指的是 XMLHttpRequest(XHR),axios和jQuer ajax都是对Ajax的封装。