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

更新时间：2023年10月13日 11:04:23 作者：书启秋枫

ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的ajax都有,ajax有的axios不一定有,总结一句话就是axios是ajax,ajax不止axios,本文对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的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

ajax post下载flask文件流以及中文文件名问题
这篇文章主要介绍了ajax post下载flask文件流以及中文文件名问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
谈谈你对aja的理解(一、二)
Ajax是Asynchronous Javascript And XML的缩写，其作用通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象，直接与服务器进行通讯，可以在不重载页面的情况下与服务器交换数据。
2015-10-10
AJAX初级教程之初识AJAX
本文是ajax初级教程的第一篇，本系列教程将从实用的角度出发，以最快的速度让读者掌握基本的AJAX应用，以最直接的方式展示AJAX技术。本文则讲解下AJAX的基础知识
2014-12-12
php与ajax一些经验
php与ajax一些经验...
2006-11-11
AJAX请求是否真的不安全？谈一谈Web安全与AJAX的关系
Ajax中没有固有的安全漏洞，但是对该技术向量的适配显著地改变了网络应用的开发途径以及方法论。AJAX请求的安全性是大家经常会谈论的一个话题，AJAX请求是否真的不安全？下面这篇文章就来给大家详细谈一谈Web安全与AJAX关系的相关资料，需要的朋友可以参考下。
2018-01-01
聊一聊Ajax的优缺点
和大家一起聊一聊Ajax的优缺点，Ajax是一个动态的WEB应用的开发技术，它的出现丰富了用户的体验，今天就和大家进一步的了解Ajax,感兴趣的小伙伴们可以参考一下
2016-02-02
jquery的ajax同步和异步的理解及示例
最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载
2014-04-04
Ajax请求成功后打开新窗口地址
这篇文章主要介绍了Ajax请求成功后打开新窗口地址的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-08-08
发现个AJAX图片浏览器SIMPLEVIEWER
发现个AJAX图片浏览器SIMPLEVIEWER...
2007-04-04
ajax readyState的五种状态详解
0 －（未初始化）还没有调用send()方法 1 －（载入）已调用send()方法，正在发送请求 2 －（载入完成）send()方法执行完成，已经接收到全部响应内容 3 －（交互）正在解析响应内容 4 －（完成）响应内容解析完成，可以在客户端调用了
2008-12-12