一、Ajax的使用步骤
1.创建XML对象
const xhr=new XMLHttpRequest();
2.监听事件，处理响应
3.准备发送请求 true表示异步 ajax中永远是异步，永远是true
4.发送请求
二、GET和POST请求
三、JSON的三种形式
四、JSON的方法
五、跨域
六、XHR的属性和方法
七、FormData
八、axios
九、Fetch
十、axios和fetch区别
Axios 和 Fetch 都是用于在 JavaScript 中执行 HTTP 请求的工具，但它们有显著的区别和各自的特点。
Axios
- 定义与来源
• Axios 是一个基于 Promise 的 HTTP 客户端库，支持浏览器和 Node.js 环境。
• 是一个第三方库，需要通过 npm 或 CDN 引入使用。
- 主要特点
• 默认支持JSON处理：
• 请求数据会自动序列化为 JSON。
• 响应数据也会被自动解析为 JSON。
• 内置功能强大：
• 支持拦截器，可以在请求或响应前后添加逻辑（如鉴权、错误处理）。
• 自动管理请求的 headers。
• 自动处理 CSRF 保护（如果后端支持相关机制）。
• 易于处理错误：
• 在非 2xx 状态码下，Axios 会自动抛出异常，便于集中处理。
• 跨浏览器兼容性更好：
• Axios 在旧版浏览器中表现更稳定，因为它使用了 XMLHttpRequest，并封装了许多兼容性问题。
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));
Fetch
- 定义与来源
• Fetch 是浏览器内置的原生 API，基于 Promise，用于执行 HTTP 请求。
• 不需要引入额外的库，现代浏览器原生支持。
- 主要特点
• 轻量且原生：
• 直接使用，无需额外依赖。
• 灵活性高：
• 更接近底层，允许开发者控制请求的每个细节。
• 处理 JSON 需要手动解析：
• 响应默认返回 Response 对象，数据需要手动 .json() 转换。
• 错误处理有限：
• 只有在网络错误时才会抛出异常，4xx 和 5xx 状态码不会自动作为错误，需要手动检查。
• 不支持自动取消请求（可结合 AbortController 实现）。
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
关系
• Axios 是对 Fetch 和 XMLHttpRequest 的封装：它封装了许多常见的场景（如拦截器、取消请求），使 HTTP 请求更便捷和一致。
• Fetch 是标准 API：作为现代浏览器的原生 API，Fetch 提供了底层的灵活性，但缺乏一些高级功能。