1.Promise对象_Ajax实操
promise不是替代网络请求，只是包裹网络请求，使使用更方便，不再用回调的形式去拿数据。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise_html</title>
</head>
<body>
<script>
//XHR对象，页面原生对象，实际应用中不用编写，采用框架或者Ajax即可
const getJSON = function (url) {
const promise = new Promise(function (resolve, reject) {
const handler = function () {
if (client.readyState !== 4) {//如果状态码不是4，说明请求还没有完成，直接返回
return;//状态码有0,1,2,3,4，0是未初始化，1是正在发送请求，2是请求已发送，3是正在接收响应，4是响应已接收
}
if (this.status === 200) {//如果状态码是200，说明请求成功，400是前端错误，500是后端错误
resolve(this.response);//成功获取响应结果
} else {//如果状态码不是200，说明请求失败
reject(new Error(this.statusText));//返回错误的文本信息
}
}
//做异步操作：异步请求代码
const client = new XMLHttpRequest();//创建XHR对象实例
client.open("GET", url);//打开网络请求，GET请求，url为请求地址
client.onreadystatechange = handler;//绑定状态改变事件，回调函数为handler.接受前后端状态后执行函数handler
client.responseType = "json";//设置响应数据类型为json
client.setRequestHeader("Accept", "application/json");//设置请求头，告诉服务器我要的是json格式的数据
client.send();
})
return promise;//返回promise对象实例
}
//请求json格式的数据.注意这里没有分号
getJSON("https://jsonplaceholder.typicode.com/todos/1")//JSON接口
.then(function (data) {
console.log(data);//返回网络请求得到的结果
}, function (error) {
console.log(error);//返回错误的文本信息
})
</script>
</body>
</html>1.什么是JSON？
2.什么是Ajax？
3.前后端数据接口怎么设置
┌───────────────────┐
│ 前端（浏览器） │
│ HTML / CSS / JS │
└───────┬───────────┘
│ ① 发送请求（Ajax / Fetch）
▼
┌───────────────────┐
│ 后端服务器 │
│ Node.js / Java / │
│ Python / PHP 等 │
└───────┬───────────┘
│ ② 处理请求（解析参数、查询数据库等）
▼
┌───────────────────┐
│ 数据库（DB） │
│ MySQL / MongoDB 等 │
└───────┬───────────┘
│ ③ 返回数据（JSON）
▼
┌───────────────────┐
│ 后端服务器 │
│ 将结果封装成 JSON │
└───────┬───────────┘
│ ④ 响应返回
▼
┌───────────────────┐
│ 前端（浏览器） │
│ 解析 JSON → 渲染页面 │
└───────────────────┘
- 什么是 JSON
定义：
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，用于在服务器与客户端之间传输数据。
特点：
* 基于键值对（key-value）的结构；
* 语法简单、可读性强；
* 与语言无关（几乎所有语言都支持解析和生成 JSON）。
示例：
```json
{
"name": "Alice",
"age": 25,
"isStudent": false
}
```
- 什么是 Ajax
定义：
Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器进行异步数据交互的技术。
核心原理：
浏览器通过 `XMLHttpRequest` 或 `fetch` 向服务器发送请求 → 服务器返回数据（常用 JSON 格式） → JavaScript 接收并更新页面内容。
示例（使用 fetch）：
```javascript
fetch('/api/user')
.then(response => response.json())
.then(data => console.log(data));
```
- 前后端数据接口设置
基本流程：
- 后端定义接口（API）
* 指定接口路径（如 `/api/user`）
* 定义请求方式（GET、POST、PUT、DELETE）
* 返回标准化 JSON 数据
示例（Node.js / Express）：
```javascript
app.get('/api/user', (req, res) => {
res.json({ name: 'Alice', age: 25 });
});
```
- 前端调用接口
* 使用 Ajax（`fetch` 或 `axios`）请求后端数据
* 接收 JSON 数据并渲染到页面
示例：
```javascript
fetch('/api/user')
.then(res => res.json())
.then(data => console.log(data));
```
- 跨域配置（如前后端分离时）
* 后端需允许跨域请求（CORS）
```javascript
// Node.js 示例
const cors = require('cors');
app.use(cors());
| 概念 | 定义 | 作用 |
|---|---|---|
| JSON | 一种轻量级数据格式 | 用来传递数据 |
| Ajax | 异步请求技术 | 用来获取数据 |
| 接口（API） | 前后端数据交互的通道 | 定义数据怎么传 |
-
XHR 是 送外卖的小哥（他真的去跑任务）。
-
Promise 是 外卖平台的订单系统（你可以在上面等结果）。
-
.then()是 "外卖到了通知我" 这个功能。
所以说，Ajax是一种异步处理的技术，可以像后端服务器请求，在不刷新整个界面的情况下处理数据，本质通过XHR或者fetch进行请求，但是使用promise可以进行封装，更加便捷，用.then函数接收请求的结果。
| 问题 | 答案 |
|---|---|
| 1️⃣ 用的是 XHR 还是 Promise？ | 两个都用：XHR 负责发请求，Promise 包装它的结果 |
2️⃣ .then() 前边要加什么？ |
.then() 必须接在 Promise 对象后面，比如 getJSON() 的返回值 |
3️⃣ 为什么不用再 new Promise()？ |
因为在函数 getJSON() 里已经 new 过了，你只要用 .then() 就行 |
| 步骤 | 发生了什么 | 属于谁 |
|---|---|---|
| ① 创建请求 | XMLHttpRequest 发送请求 |
XHR |
| ② 创建 Promise | 包装异步操作结果 | Promise |
| ③ 请求返回 | 调用 resolve() 或 reject() |
XHR 内部逻辑 |
④ .then() 执行 |
处理成功结果 | Promise 链 |
上面这个是网络请求，用到了promise和XHR，上一节的图片加载使用的是浏览器自身的·Image（）函数和promise，没有用到XHR。异步的核心是 img.onload / img.onerror，
而不是 xhr.onreadystatechange。
| 示例 | 内部异步操作 | 用的对象 | 是否用 XHR | .then() 作用 |
|---|---|---|---|---|
| getJSON() | 请求 JSON 数据 | XMLHttpRequest |
✅ 是 | 获取接口数据 |
| loadImageAsync() | 加载图片资源 | Image() |
❌ 否 | 获取图片对象 |