❄❄❄白雪警告❄❄❄

原生的 AJAX 请求方式目前已经很少使用，一般使用 axios。本文包含部分 axios 内容。

源码附于文末。

什么是 AJAX？

AJAX（Asynchronous JavaScript And XML，异步的 JavaScript 和 XML），读作”/eɪdʒæks/，也可以念为“阿贾克斯”。最大的特点就是在不刷新网页的情况下向服务端发请求并获取结果。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。参考：AJAX 简介 (w3school.com.cn)

XML 可扩展标记语言，XML 被设计用来传输和存储数据。XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。不过现在 AJAX 多使用 JSON 格式了。

XML 简介：XML系列教程 (w3school.com.cn)

AJAX 的优点：

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

AJAX 的缺点：

没有浏览历史，不能回退
存在跨域问题 (同源)
SEO 不友好

应用：

搜索联想
用户名是否可用

同步操作和异步操作的区别：

学习准备

预备知识

本文章在于通过代码实践快速掌握 AJAX 基本使用。阅读前你需要具备一定的 HTML、CSS、JS 知识，了解 HTTP 协议的请求报文和响应报文的结构。

JS 基础请看：JavaScript 基础 - 学习 Web 开发 | MDN (mozilla.org)
HTTP 结构：HTTP 消息 - HTTP | MDN (mozilla.org)

学习前我们需要懂得使用 Chrome、Edge 浏览器开发者模式（按 F12），查看查看 HTTP 报文接收和发送情况。

本文章主要通过可运行的案例代码以驱动学习，学习者可以通过理解代码并试图在本机运行以加深理解。建议你在学习时打开 F12 调试窗口，查看控制台输出与网络请求。

本篇文章的实践内容参考：https://www.bilibili.com/video/BV1WC4y1b78y，视频时长约 3 小时。

软件安装

Node.js

安装 Node.js：Node.js (nodejs.org)。

安装完毕后在终端输入命令：

node -v

若显示版本号即安装成功。

Express 服务端框架

为了更好的演示 AJAX 操作，我们需要自己启动一个服务端。接下来的实验我们只需要对这个服务端进行消息的发送。在这一小节中，我们只需要了解 Express 的最小知识。

安装前保证安装了 Node.js，输入：

1	npm i express

npm 是 Node.js 提供的包管理工具。通过该命令安装 express。

新建 js 文件，可以将其命名为 server.js，内容如下：

// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request是对请求报文的封装，response是对响应报文的封装
app.get('/server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin',"*");

    //设置一个简单的响应
    response.send('HELLO AJAX!')
})

// 4. 监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中...")
})

打开终端，执行以下命令启动服务：

1	node <your server.js>

终端输出 " 服务已经启动，8000 端口监听中…"。打开浏览器输入 127.0.0.1:8000，若显示 '‘‘HELLO AJAX!’，则服务启动成功。

注意，每次修改 server.js 文件，保存后需要关闭当前正在运行的服务，再次启动 server.js 才能应用新的更改。如果我们想要每次修改 server.js 保存后自动重启服务器，我们可以安装 modemon 进行解决。

常见错误：

启动失败 address already in use :::8000

这表明 8000 端口已经被占用，你可能忘记中断之前打开的服务，尝试中断之前的服务，或换一个端口号尝试。
输入命令后没有反应

检查你是不是粘贴后没有保存。

nodemon 工具安装

官网链接：nodemon - npm (npmjs.com)

安装前保证安装好了 Node.js。安装命令：

1	npm install -g nodemon

以后每次启动 server.js 脚本可以改为使用以下命令：

1	nodemon <your server.js>

axios

axio 是前端热门的 AJAX 工具库：Axios中文文档 | Axios中文网 (axios-http.cn)

使用 axio 我们可以直接通过页面链接引用。

但是官网给的 CDN 链接是在国外的，所以我们可以通过 BootCDN 查询并替换网址。

1	https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js

【非必须】VSCode 插件 -Live Server

如果你是在 VSCode 环境下进行操作的话，可以安装一个 Live Server 插件。这个插件右键可以将 html 网页用服务器打开，以模拟跨域同源实验。

第一章节：AJAX 请求基本实践

本章节包含两个文件：

1 2	server.js 服务器文件 client.html 案例

案例食用说明：

在终端输入命令执行 server.js nodemon <your server.js>
浏览器打开 client.html

阅读源码和注解理解即可。

要点提示：

Chapter 1：本章节演示了 AJAX 操作的基本步骤
Chapter 2：演示使用 GET 方法传参与请求头设置

打开 F12 查看请求标头，可以发现自定义标头已添加。

小技巧：解决 IE 缓存问题。神奇的 IE 浏览器会对 AJAX 进行缓存，解决方法：在请求地址后加上随机的参数，比如：

1	xhr.open("GET","http://127.0.0.1:8000/server?t="+Date.now())

或者在调试器中禁用缓存。

Chapter 3：演示 AJAX 发送 POST 请求
Chapter 4：演示 AJAX 超时设置以及设置网络异常时的回调

调试器可以方便地断开网络：

Chapter 5：防抖的演示。防抖在于防止用户反复点击按钮发送多个请求，这里的代码可以实现用户每次只能发送一个请求。
Chapter 6：axios 演示
Chapter 7：fetch 演示

第二章节：跨域/同源

同源策略 (Same-Origin Policy) 最早由 Netscape 公司提出，是浏览器的一种安全策略，也就是当前网页 URL 和 AJAX 请求的目标 URL 必须同源（协议、域名、端口号必须完全相同）。AJAX 发送请求时默认遵循同源策略。违背同源策略就是跨域。

跨域的解决方案有以下两种：

Jsonp：JSONP（JSON with Padding)，是一个非官方的跨域解决方案，只支持 get 请求。

JSONp 怎么工作的？在网页有一些标签天生具有跨域能力，比如：img、link iframe、script。JSONP 就是利用 script 标签的跨域能力来发送请求的。
CORS：CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。CORS 怎么工作的？CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

本章节包含两个文件：

1
2
3

server.js 服务器文件（就是上一章节那个）
same-origin-policy.html 案例
handle.js 示例js文件（需保证与server.js放在同一层级下）

案例食用说明：

在终端输入命令执行 server.js nodemon <your server.js>
使用不同的端口或协议打开 same-origin-policy.html

阅读源码和注解理解即可。

要点提示：

Chapter 1：同源策略示例
Chapter 2：Jsonp 简单示例
Chapter 3：原生使用 Jsonp
Chapter 4：服务端设置 CROS 响应头实现跨域

文章代码

链接：https://pan.baidu.com/s/1AsxAiua98_pyHzno7HCSFA?pwd=33gn

提取码：33gn

本文参考

Day03-02. Ajax-Axios2_哔哩哔哩_bilibili

代码驱动学习-快速入门 AJAX