Ajax 入门 - 技术栈

一、Ajax概念

Ajax（Asynchronous JavaScript and XML） 是一种在不刷新整个页面的情况下，与服务器进行异步通信并更新部分网页的技术。尽管名称中包含 "XML"，但现代 Ajax 更多使用 JSON 作为数据格式。

二、核心概念

异步通信：无需刷新整个页面，可在后台与服务器交换数据。

核心技术 ：

XMLHttpRequest（XHR）：原生 JavaScript API（旧版）

Fetch API：现代 JavaScript 替代方案

第三方库 ：jQuery、Axios（最常用）

2.1 传统 XMLHttpRequest 用法（了解即可）

javascript 复制代码

const xhr = new XMLHttpRequest();

// 初始化请求
xhr.open('GET', '/api/data', true); // true 表示异步

// 监听状态变化
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 处理响应数据
  }
};

// 发送请求
xhr.send();

2.2 现代 Fetch API（原生替代方案）

javascript 复制代码

// GET 请求
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// POST 请求
fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data));

2.3 使用 Axios（推荐）

javascript 复制代码

// GET 请求
axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// POST 请求
axios.post('/api/submit', { name: 'John', age: 30 })
  .then(response => console.log(response.data));

Ajax 请求流程

触发事件：用户点击按钮、滚动页面等。
创建请求：使用 XHR、Fetch 或 Axios 初始化请求。
发送数据：将请求发送到服务器（可选携带参数）。
处理响应：服务器返回数据后，更新部分 DOM。

三、对比XMLHttpRequest VS Fetch VS Axios

特性	XMLHttpRequest	Fetch API	Axios
语法复杂度	高	中	低
Promise 支持	不支持	支持	支持
自动转换 JSON	否	需手动	是
拦截器	无	无	有
取消请求	复杂	需 AbortController	简单
浏览器兼容性	全支持	IE 不支持	IE 11+

四、Axios介绍

4.1、Axios概念

Axios 是一个基于 Promise 的 HTTP 客户端，专为浏览器和 Node.js 设计。相比原生 Fetch API，它提供了更强大的功能和更友好的 API，成为现代前端开发中处理 HTTP 请求的首选工具。

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

4.2、Axios 请求方法别名

HTTP 方法	Axios 别名	参数格式	用途
GET	`axios.get(url[, config])`	`url`（必选），`config`（可选）	获取资源（如列表、详情）
POST	`axios.post(url[, data[, config]])`	`url`（必选），`data`（可选），`config`（可选）	创建新资源（如提交表单、上传文件）
PUT	`axios.put(url[, data[, config]])`	同上	全量更新资源（替换整个对象）
DELETE	`axios.delete(url[, config])`	`url`（必选），`config`（可选）	删除资源
PATCH	`axios.patch(url[, data[, config]])`	同上	部分更新资源（仅修改指定字段）
HEAD	`axios.head(url[, config])`	同上	获取响应头（不返回响应体）
OPTIONS	`axios.options(url[, config])`	同上	获取服务器支持的请求方法和 CORS 配置（预检请求）

4.3、 Axios使用

引入Axios文件（如果网络不通畅，可以使用离线的已经下载好的js文件）

点击按钮时，使用Axios发送请求

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--导入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>Axios GET/POST Request</h1>
    <button onclick="makeRequest()">获取GET请求</button>
    <button onclick="makePostRequest()">获取POST请求</button>

    <script>
        // 使用axios发送GET请求
        function makeRequest() {
            axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(function (response) {
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.error('Error:', error);
                });
                console.log('----------->GET请求已发送');
        }
        // 使用axios发送POST请求
        function makePostRequest() {
            axios.post('https://jsonplaceholder.typicode.com/posts', {
                title: 'foo',
                body: 'bar',
                userId: 1
            })
                .then(function (response) {
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.error('Error:', error);
                });
        }
    </script>

</body>

</html>

运行效果