《Slides Dev Web》 06. HTTP & AJAX

• 语言: 英语
• 格式: .pdf
• 来源: he-arc.github.io

摘要

文档详细阐述了HTTP协议的历史和发展，从HTTP/1.0到HTTP/3的各个版本特性，包括连接方式、头信息处理、多路复用等。同时介绍了AJAX技术，即异步JavaScript和XML，通过XMLHttpRequest对象实现无需刷新页面的动态内容更新。文档还讨论了AJAX的历史、应用场景以及使用中的注意事项，包括用户体验优化和代码性能。最后，通过示例展示了HTTP请求与响应的格式，以及AJAX的典型实现方式。

AI总结

### 总结：《HTTP & AJAX》

#### HTTP 协议
**1. HTTP 发展历程：**
- **HTTP 0.9 (1990)**：最早版本，支持基本的连接、GET 请求和响应。
- **HTTP 1.0 (1996)**：引入了请求和响应头（如 Host、Referer、Content-Type 等）。
- **HTTP 1.1 (1997)**：增加了 Keep-Alive、管道化（Pipelining）、缓存机制等，Host 头成为必填。
- **HTTP 2.0 (2015)**：二进制协议，支持多路复用、头部压缩和服务器推送，已被绝大多数浏览器和服务器广泛支持。
- **HTTP 3.0 (2019)**：基于 UDP 协议，提升了错误纠正和拥塞控制性能，实现更低延迟。

**2. HTTP 方法：**
- GET：获取资源。
- POST：创建资源。
- PUT：完全替换资源。
- PATCH：部分替换资源。
- DELETE：删除资源。
- HEAD：获取响应头，不返回资源。
- TRACE、OPTIONS、CONNECT：用于诊断和 OTHERS。

**3. HTTP 状态码：**
- 1xx：信息性状态（如 101 切换协议）。
- 2xx：成功状态（如 200 成功、204 无内容）。
- 3xx：重定向状态（如 302 重定向、304 未修改）。
- 4xx：客户端错误（如 400 错误请求、404 未找到）。
- 5xx：服务器错误（如 500 内部错误、503 服务不可用）。

---

#### AJAX（Asynchronous JavaScript And XML）
**1. 定义：**
- AJAX 是一种无需刷新页面即可与服务器交互的技术，结合了 JavaScript、DOM、XML 和 CSS。
- 核心是 **XMLHttpRequest**（XHR），用于在后台异步请求数据。

**2. XHR**

**a. 方法：**
- `open()`: 配置请求（方法、URL、异步模式）。
- `send()`: 发送请求。
- `setRequestHeader()`: 设置请求头。
- `abort()`: 取消请求。

**b. 事件：**
- `readyState`: 请求状态（0 到 4，4 表示完成）。
- `status`: HTTP 状态码。
- `onreadystatechange`: 状态改变时触发。

**c. 响应：**
- `responseText`: 文本响应。
- `responseXML`: XML 响应。

**3. 数据交互：**
- **GET**: 用于获取数据，URL 长度有限，但可以缓存。
- **POST**: 用于提交敏感数据，长度由服务器限制，但不会缓存。
- **缓存控制**：通过设置 Cache-Control、Pragma 和 Expires 头可以避免缓存。

**4. AJAX 应用：**
- 动态更新页面内容。
- 表单自动完成。
- 服务器验证。
- 实时数据交互。

**5. 兼容性与适用性：**
- XHR 已成为标准，普遍支持。
- fetch API 是其现代替代方案。
- AJAX 无需依赖 XML 或异步模式，但推荐与 History API 配合以提升用户体验。

---

#### AJAX 实施与实践
**1. 用户体验：**
- 提供加载指示（如 GIF、Loading 条）。
- 实时反馈（如黄色渐隐效果）。
- 避免打断用户操作。

**2. 性能优化：**
- 减少网络延迟和数据量。
- 避免重复请求。
- 使用 CDN 和缓存。

**3. 安全性：**
- 验证用户输入。
- 防止 XSS 和 CSRF 攻击。
- 使用 HTTPS 保证数据安全。

**4. 其他工具与技巧：**
- 使用浏览器开发者工具调试。
- 替代方案：iframe、JavaScript 库（如 jQuery）、Fetch API。

---

#### 总结
HTTP 协议从 0.9 版本迭代至 3.0 版本，逐步提升了性能和安全性。AJAX 通过 XHR 实现了动态页面更新，极大改善了用户体验。尽管现代开发中 Fetch API 和 Promise gradually 作为替代方案，但 XHR 仍是 AJAX 的核心。开发时需注重用户体验、性能和安全性，以确保应用的高效和易用性。