《Slides Dev Web》 06. HTTP & AJAX

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

摘要

文档详细介绍了HTTP协议的发展历程及其在Web开发中的应用，涵盖HTTP 1.0、1.1、2.0和3.0版本的主要特点。同时，文档深入讲解了AJAX技术，包括XHR对象的使用方法、jQuery的AJAX功能、Fetch API的使用场景以及AJAX开发中的错误处理和最佳实践。文档还提供了具体的代码示例，帮助理解如何在实际开发中应用这些技术。

AI总结

### 文档总结：HTTP & AJAX

#### 1. **HTTP的发展历程**
- **HTTP 0.9**：1990年发明，支持简单的GET请求。
- **HTTP 1.0**：1996年发布，引入请求头和响应头。
- **HTTP 1.1**：1997年发布，新增Keep-Alive、管道化、缓存等功能。
- **HTTP 2.0**：2015年发布，支持二进制数据、多路复用、头压缩，被大多数浏览器和服务器支持。
- **HTTP 3.0**：2019年发布，基于UDP，支持错误修复、流量控制和0 RTT。

#### 2. **AJAX与XHR**
- **XHR（XMLHttpRequest）**：1999年IE5引入，成为AJAX的核心技术。
- 支持异步请求，通过`open`和`send`方法发送请求。
- 包含状态管理（readyState、status）、响应处理（responseText、responseXML）和错误处理。
- **XHR的使用**：
- GET：获取数据，支持缓存，用户可操作（书签、分享）。
- POST：提交数据，不支持缓存，用于敏感操作。
- 响应处理：支持文本、XML和JSON格式。
- 防止缓存：通过设置特定的请求头（Cache-Control、Pragma、Expires）。

#### 3. **AJAX的实现方式**
- **XHR**：标准方法，广泛支持。
- **Fetch API**：XHR的 successors，支持更简洁的语法和Promise。
- 示例：`fetch('fichier.json').then(...)`。
- **其他方法**：包括JavaScript库（如jQuery）、图片/cookies、插件等。

#### 4. **AJAX的优缺点**
- **优点**：
- 实现无刷新页面，提升用户体验。
- 动态更新DOM，支持表单验证、自动完成功能。
- **缺点**：
- XHR请求不记录在浏览器历史中，需通过History API解决。
- 用户体验：需提供加载提示（如GIF、Loading动画）。

#### 5. **HTTP状态码与方法**
- **状态码**：
- 1xx：信息性。
- 2xx：成功。
- 3xx：重定向。
- 4xx：客户端错误。
- 5xx：服务器端错误。
- **HTTP方法**：
- GET：获取资源。
- POST：创建资源。
- PUT：替换资源。
- PATCH：部分替换资源。
- DELETE：删除资源。
- HEAD：获取资源头信息。
- TRACE、OPTIONS、CONNECT：较少使用。

#### 6. **AJAX的错误处理**
- 通过HTTP状态码和响应头（如Status字段）处理错误。
- 示例：`myXHR.getResponseHeader('Status')`。

#### 7. **最佳实践**
- **用户体验**：
- 提供加载提示。
- 避免频繁请求，减少带宽消耗。
- 避免页面闪烁或内容突然变化。
- **可访问性**：
- 使用对比度检查工具。
- 遵循ARIA规范。
- **性能**：
- 减少不必要的请求。
- 使用缓存机制。

#### 8. **总结**
- HTTP是Web通信的基础协议，经历了多次改进以提升性能和功能。
- AJAX通过XHR或Fetch API实现了异步通信，极大提升了Web应用的交互性和用户体验。
- 开发中需关注错误处理、用户反馈和性能优化，以确保良好的用户体验。