javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Ajax与Axios总结

Ajax与Axios的基础知识以及详细对比总结

作者：nkion

在Web开发中Ajax和Axios是两种实现异步数据请求的技术,Ajax可以在不刷新页面的情况下与服务器通信,Axios是一个基于Promise的HTTP客户端,简化了HTTP请求的过程,两者都能处理多种数据格式,这篇文章主要介绍了Ajax与Axios的基础知识以及详细对比总结,需要的朋友可以参考下

一、引言

在现代Web开发中，前端与后端的数据交互是至关重要的一环。随着前端技术的发展，越来越多的开发者需要在不刷新整个页面的情况下与服务器进行数据交换。这种技术被称为“异步数据请求”，而Ajax和Axios是实现这一功能的两种常见方式。本文将深入浅出地介绍Ajax与Axios的基础知识，并对它们进行详细对比。

二、什么是Ajax？

2.1 Ajax的定义

Ajax是“异步JavaScript与XML”（Asynchronous JavaScript and XML）的缩写。尽管名称中包含了XML，但Ajax并不局限于使用XML进行数据交换，它还可以处理JSON、HTML、纯文本等多种格式。Ajax的核心思想是允许网页在不重新加载整个页面的情况下，从服务器请求数据或发送数据到服务器。

图片来自网络

2.2 Ajax的工作原理

Ajax的工作原理可以通过以下几个步骤来理解：

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function ajax1(){
        
        let sno = document.querySelector(".sno").value;
        //1.创建ajax对象
        let xmlHttpRequest = new XMLHttpRequest();
        //2.设置请求方式和请求地址
        xmlHttpRequest.open("GET","/Servlet_war_exploded/ajax3?sno="+sno,true);
        //3.监听数据是否变化
        xmlHttpRequest.onreadystatechange=function (){
            if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                //4.获取数据
                let data =JSON.parse(xmlHttpRequest.responseText);
                //5.将数据显示在页面上
                // document.querySelector("#id").innerHTML=data.sno;
                document.querySelector(".name").innerHTML=data.sname;
                document.querySelector(".sex").innerHTML=data.ssex;
                document.querySelector(".class").innerHTML=data.sclass;

            }
        }
        //4.发送请求
        xmlHttpRequest.send();
    }
</script>
<body>
<h1>aja</h1>
<div id="show">
    id：<input type="text" class="sno" placeholder="id"><br>
    姓名：<span class="name"></span><br>
    姓别：<span class="sex"></span><br>
    班级：<span class="class"></span><br>
</div>
<button onclick="ajax1()">提交
</button>
</body>
</html>

2.4 Ajax的优缺点

优点：

缺点：

三、什么是Axios？

3.1 Axios的定义

Axios是一个基于Promise的HTTP客户端，主要用于在浏览器和Node.js环境中发送异步请求。Axios简化了HTTP请求的过程，并且提供了更多便捷的功能，例如请求拦截、响应拦截、错误处理等。与原生的XMLHttpRequest对象相比，Axios的语法更加简洁，使用更加方便。其实Axios就是对Ajax的封装。

官网： Axios中文文档 | Axios中文网

3.2 Axios的安装与使用

在使用Axios之前，我们需要先安装它。如果你使用的是前端构建工具（如Webpack、Parcel等），可以通过npm或yarn安装Axios：

npm install axios

或者：

yarn add axios

或者也可以直接导入axios.js文件到项目中。

安装完成后，你可以在JavaScript文件中导入并使用它

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

在这个例子中，Axios通过axios.get()方法发送了一个GET请求，并返回了一个Promise对象。我们可以通过then方法处理成功的响应，通过catch方法处理错误。

3.3 Axios的功能特点

Axios除了基本的GET和POST请求外，还提供了其他的功能，可以更方便地处理HTTP请求。

3.4 使用Axios的示例

下面是一个使用Axios发送POST请求的示例：

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error('Error posting data:', error);
});

在这个示例中，我们通过axios.post()方法发送了一个POST请求，将数据传递给服务器，并处理了响应结果。

3.5 Axios的优缺点

优点：

缺点：

四、Ajax与Axios的对比

4.1 语法对比

首先，Ajax和Axios在语法上有明显的差异。Ajax需要手动创建XMLHttpRequest对象并设置各种参数，而Axios则提供了更加简洁的API封装。

Ajax：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

 Axios：

axios.get('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

可以看出，Axios通过封装，将HTTP请求的处理变得更加简洁直观。

4.2 功能对比

4.3 兼容性对比

五、总结

Ajax与Axios作为前端开发中常用的异步数据请求工具，各有优劣。Ajax是JavaScript的原生方法，具有较好的兼容性和较少的依赖，但其使用起来相对繁琐。Axios则是一个功能强大、易于使用的第三方库，提供了更加友好的API和丰富的功能，适合现代前端开发需求。

到此这篇关于Ajax与Axios的基础知识以及详细对比总结的文章就介绍到这了,更多相关Ajax与Axios总结内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文