Ajax与Axios，以及Apifox的入门使用

作者：blue

时间：2025.3.20

文章目录

Ajax与Axios，以及Apifox的入门使用
- 1.Ajax
- 2.Axios
- 3.Apifox的基本使用
- - 内容
  - [Path 参数](#Path 参数)
  - - 定义
    - 语法
    - 用途
  - [Query 参数](#Query 参数)
  - - 定义
    - 语法
    - 用途

1.Ajax

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想，用户名是否可用的校验等等。

原生的Ajax

1.准备数据地址

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

准备数据地址这个步骤本文将在后面Apifox的入门运用简单讲解

示例代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax测试</title>
</head>
<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>

<script>
    function getData(){
        //1.创建XMLHttpRequest 
        var xmlHttpRequest = new XMLHttpRequest();

        //2.发送异步请求
        xmlHttpRequest.open('GET','http://127.0.0.1:4523/m1/6068388-5758637-default/user/1');
        xmlHttpRequest.send();//发送请求

        //3.获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

我们运行，在浏览器中点击获取数据按钮，可以看到数据展示在了页面中

我们来详细理解一下这个过程

function getData()：定义一个名为 getData 的函数，该函数会在点击按钮时被调用。
var xmlHttpRequest = new XMLHttpRequest();：创建一个 XMLHttpRequest 对象，这个对象可用于在浏览器和服务器之间进行异步通信。
xmlHttpRequest.open('GET','http://127.0.0.1:4523/m1/6068388-5758637-default/user/1');：初始化一个 HTTP 请求，这里使用的是 GET 方法，请求的 URL 是 http://127.0.0.1:4523/m1/6068388-5758637-default/user/1。
xmlHttpRequest.send();：发送 HTTP 请求到服务器。
xmlHttpRequest.onreadystatechange = function(){ ... }：为 XMLHttpRequest 对象的 onreadystatechange 事件绑定一个回调函数，每当 XMLHttpRequest 对象的状态发生变化时，这个回调函数就会被触发。
if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)：检查XMLHttpRequest 对象的状态和 HTTP 响应状态码。
- xmlHttpRequest.readyState==4 表示请求已完成，且响应已就绪。
- xmlHttpRequest.status==200 表示请求成功。
document.getElementById('div1').innerHTML=xmlHttpRequest.responseText;：若请求成功，就将服务器返回的响应文本插入到 id 为 div1 的 <div> 元素中。

综上所述，整个代码的逻辑是：当用户点击 "获取数据" 按钮时，页面会向指定的服务器 URL 发送一个异步 GET 请求，在请求成功后，将服务器返回的数据显示在页面的 <div> 元素中。

但是这个过程太复杂了，现在开发基本不用

2.Axios

Axios对原生Ajax进行了封装，简化书写，快速开发

官网：Axios中文文档 | Axios中文网 (axios-http.cn)

在自己练习中我们可以直接使用CND引入Axios

刚刚用原生Ajax完成的功能我们就可以用Axios这样做

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AxiosTest</title>
    <!-- 引入 Axios -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>
<script>
    function getData(){
        axios({
            method:'get',
            url:'http://127.0.0.1:4523/m1/6068388-5758637-default/user/1'
        }).then(result => {
            document.getElementById('div1').innerHTML = JSON.stringify(result.data);
        })
    }
</script>
</html>

另外Axios，已经为所有支持的请求方法提供了别名，所以刚刚的Axios实例的代码还可以被简化。

html 复制代码

<script>
    function getData(){
        // axios({
        //     method:'get',
        //     url:'http://127.0.0.1:4523/m1/6068388-5758637-default/user/1'
        // }).then(result => {
        //     document.getElementById('div1').innerHTML = JSON.stringify(result.data);
        // })

        axios.get('http://127.0.0.1:4523/m1/6068388-5758637-default/user/1').then(result => {
            document.getElementById('div1').innerHTML = JSON.stringify(result.data);
        })
    }
</script>

3.Apifox的基本使用

这个部分来讲解我是如何来准备这些测试数据的。这里我推荐的平台是Apifox。

首先要了解一下什么是接口文档

接口文档是一种详细描述软件系统中各个接口信息的技术文档，它是开发团队之间、前后端开发者之间、企业与合作伙伴之间进行沟通和协作的重要依据。

内容

接口概述：对接口的整体描述，包括接口的名称、所属系统、功能简介等，让读者快速了解该接口的用途。
调用说明：包含接口的访问地址（URL）、请求方式（如 GET、POST、PUT、DELETE 等）、请求参数（参数名、类型、是否必传、参数说明等）、响应参数（返回值的格式、字段含义、可能的返回状态码及对应说明）。
错误码说明：列举接口可能出现的错误码及其代表的具体错误信息，方便开发人员在出现问题时进行排查和处理。
示例：提供接口调用的示例，包括请求示例和响应示例，使开发人员能够更直观地了解如何正确调用接口以及接口返回的数据格式。

Apifox就非常方便我们撰写接口文档，而且还可以提供Mock数据，方便我们进行测试

在软件开发领域，Mock（模拟）是一种重要的技术手段，它指的是创建模拟对象、数据或服务，来替代真实的对象、数据或服务进行开发、测试等工作。

前端开发：在前后端分离的开发模式中，前端开发进度通常会受限于后端接口的完成情况。借助 Mock 技术，前端开发者能够模拟后端接口返回的数据，按照接口文档里定义的格式和结构生成虚拟数据，进而提前开展页面的开发与调试工作。这样一来，前端开发就不必等待后端接口开发完毕，能够并行推进，有效提升开发效率。

下面简单演示，我们怎么创建一个接口，获得mock

首先登录apifox平台，创建一个项目，然后进入这个项目

然后选择新建接口

然后可以设置接口路径和接口名称

在这里解释一下这个Path参数和Query参数

在 Web 开发里，Path 参数和 Query 参数是 URL（统一资源定位符）中用于传递数据的两种方式，下面分别详细介绍。

Path 参数

定义

Path 参数也被叫做路径参数，它是 URL 路径的一部分。这种参数会直接嵌入到 URL 的路径当中，通常用于标识资源的唯一标识符或者特定路径。

语法

Path 参数一般紧跟在域名和资源路径之后，不同参数之间使用斜杠/分隔。例如：https://example.com/api/users/123，这里的123就是一个 Path 参数，它代表了特定用户的 ID。

用途

常用于标识资源的唯一性，像在 RESTful API 里，Path 参数常用来指定要操作的具体资源。例如，在一个博客系统的 API 中，https://example.com/api/posts/456可以表示获取 ID 为456的博客文章。

Query 参数

定义

Query 参数是 URL 中位于问号?之后的键值对，多个键值对之间使用&符号分隔。它主要用于向服务器传递额外的信息，例如过滤条件、排序规则等。

语法

Query 参数的格式为key=value，例如：https://example.com/api/search?keyword=apple&page=2，这里的keyword=apple和page=2就是两个 Query 参数。

用途

常用于对资源进行筛选、排序、分页等操作。例如，在一个商品搜索的 API 中，可以使用https://example.com/api/products?category=electronics&price_min=100&price_max=500来筛选出价格在 100 到 500 之间的电子产品。

然后我们就可以设置我们的返回响应

然后我们就可以添加示例

我们设置示例名字，点击自动生成，保存

然后我们保存这个接口，可以看到这里已经为我们提供了一个Mock的url，我们复制这个url到浏览器，中查看，刷新，可以看到每次都会有不一样的数据，这非常便于我们做测试。