Axios和Ajax的区别是什么(详细介绍)

目录

• 一、Axios 和 Ajax 的区别
• 二、Axios 和 Ajax 的区别及优缺点
• Ajax：
• 1、什么是Ajax
• 2、Ajax的原理？
• 3、核心对象？
• 4、Ajax优缺点？
• 5、Ajax适用场景
• 6、Ajax不适用场景
• 7、代码
• 8、Ajax请求的五个步骤
• Axios：
• 1、Axios是什么
• 2、Axios有那些特性？
• 3、执行get请求，有两种方式
• 4、执行post请求，注意执行post请求的入参，不需要写在params字段中，这个地方要注意与get请求的第二种方式进行区别。
• 三、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://lo**ca*lhost:8080/email/success";
                } else {
                    alert("密码错误，请重新输入！")
                    window.location.href = "http://*l*ocalhos*t: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://loca*lh*o*st:8080/fruit/add",
            {name: name, price: price, count: count},
            function (data) {
                if (data.code == 1) {
                    alert(data.message);
                    window.location.href = "http://lo**calh*ost:8080/fruit/index";
                }
                if (data.code == 0) {
                    alert(data.message);
                }
            });
    }
    function delFruit(id) {
        if (window.confirm("是否确认删除" + id + "?")) {
            $.post("http://*loca*lhost*:8080/fruit/delete?id=" + id, {id: id},
                function (data) {
                    if (data.code == 1) {
                        alert(data.message);
                        window.location.href = "http://lo**calh*ost: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=18sex=男
所以这种需要使用@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的区别内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

您可能感兴趣的文章:

• Vue为何弃用Ajax，选择Axios？ajax与axios的区别？
• 一文掌握ajax、fetch和axios的区别对比
• AJAX原理以及axios、fetch区别实例详解
• 聊一聊数据请求中Ajax、Fetch及Axios的区别
• axios和ajax的区别点总结