- AJAX 教程
- AJAX - 首页
- AJAX - 什么是 AJAX?
- AJAX - 历史
- AJAX - 动态网站与静态网站
- AJAX - 技术
- AJAX - 动作
- AJAX - XMLHttpRequest
- AJAX - 发送请求
- AJAX - 请求类型
- AJAX - 处理响应
- AJAX - 处理二进制数据
- AJAX - 提交表单
- AJAX - 文件上传
- AJAX - FormData 对象
- AJAX - 发送 POST 请求
- AJAX - 发送 PUT 请求
- AJAX - 发送 JSON 数据
- AJAX - 发送数据对象
- AJAX - 监控进度
- AJAX - 状态码
- AJAX - 应用
- AJAX - 浏览器兼容性
- AJAX - 示例
- AJAX - 浏览器支持
- AJAX - XMLHttpRequest
- AJAX - 数据库操作
- AJAX - 安全性
- AJAX - 问题
- Fetch API 基础
- Fetch API - 基础
- Fetch API 与 XMLHttpRequest
- Fetch API - 浏览器兼容性
- Fetch API - 头部信息
- Fetch API - 请求
- Fetch API - 响应
- Fetch API - 主体数据
- Fetch API - 凭据
- Fetch API - 发送 GET 请求
- Fetch API - 发送 POST 请求
- Fetch API - 发送 PUT 请求
- Fetch API - 发送 JSON 数据
- Fetch API - 发送数据对象
- Fetch API - 自定义请求对象
- Fetch API - 上传文件
- Fetch API - 处理二进制数据
- Fetch API - 状态码
- Stream API 基础
- Stream API - 基础
- Stream API - 可读流
- Stream API - 可写流
- Stream API - 变换流
- Stream API - 请求对象
- Stream API - 响应主体
- Stream API - 错误处理
- AJAX 有用资源
- AJAX - 快速指南
- AJAX - 有用资源
- AJAX - 讨论
Fetch API 与 XMLHttpRequest
XMLHttpRequest 对象用于异步地与服务器通信,这意味着我们可以在后台与服务器交换数据,而无需刷新整个页面。XMLHttpRequest 是最常用的技术,因此大多数主流浏览器(如 Google Chrome、Safari、Mozilla Firefox 或 Opera)都使用它。它还支持纯文本、JSON 数据和许多其他数据格式。它非常易于使用,并提供各种方法和属性来执行操作。我们可以使用 `XMLHttpRequest()` 构造函数创建一个 XMLHttpRequest 对象。
语法
variableName = new XMLHttpRequest()
使用 `new` 关键字和 `XMLHttpRequest()` 构造函数,我们可以创建一个新的 XMLHttpRequest 对象。必须在调用 `open()` 函数初始化它之前创建此对象,然后才能调用 `send()` 函数将请求发送到 Web 服务器。
Fetch API 提供了一个用于从服务器获取/检索资源的接口。它是 XMLHttpRequest 的现代替代方案。由于它支持请求和响应的通用定义,因此如果将来需要用于缓存 API、Service Worker、处理或修改请求和响应等,我们可以访问它们。它非常简单、易用且一致。或者我们可以说,与 XMLHttpRequest 相比,它提供了一种现代且灵活的方法来创建 HTTP 请求和处理响应。它基于 Promise API,提供了清晰的语法和更好的错误处理。
语法
fetch(res)
其中 `fetch()` 接受一个必选参数 `res`。`res` 参数定义要获取的资源,它可以是字符串、任何其他对象或请求对象。除了必选参数外,它还可以接受一个可选参数,例如方法、头部信息、主体、模式缓存、同源等。
Fetch API 与 XMLHttpRequest
以下是 Fetch API 和 XMLHttpRequest 之间的区别:
区别 | Fetch API | XMLHttpRequest |
---|---|---|
语法 |
众所周知,Fetch API 是基于 Promise 的 API,因此它提供了更清晰的语法和更好的错误处理方法。 |
XHR 基于回调方法,其语法不如 Fetch API 好。 |
跨源资源共享 (CORS) |
Fetch API 可以很好地处理 CORS 请求,无需任何额外配置。 |
XMLHttpRequest 需要特殊的配置才能处理或发出跨域请求。 |
请求和响应头部信息 |
Fetch API 提供了更灵活的方式来处理请求和响应头部信息。 |
XMLHttpRequest 提供了有限数量的方法来处理请求和响应头部信息。 |
流和解析 |
Fetch API 对流和解析大型响应提供了良好的支持,因此它可以提高性能并减少内存使用。 |
XMLHttpRequest 需要自定义程序才能获得此功能。 |
浏览器兼容性 |
Fetch API 比较新,因此可能不被旧版浏览器支持。 |
XMLHttpRequest 已经使用了多年,因此几乎所有浏览器都支持它。 |
Cookie 和凭据控制 |
Fetch API 对 Cookie 和凭据提供了良好的控制,因此与 XMLHttpRequest 相比,我们可以轻松地进行身份验证和授权。 |
XMLHttpRequest 对 Cookie 和凭据的支持较少。 |
超时 |
Fetch API 不支持超时,因此请求将持续到浏览器选择请求为止。 |
XMLHttpRequest 支持超时。 |
结论
这些是 Fetch API 和 XMLHttpRequest 之间的主要区别。与 XMLHttpRequest 相比,Fetch API 更强大且更容易理解。它也受所有现代浏览器支持,但 XMLHttpRequest 仅受旧版浏览器支持。在下一篇文章中,我们将学习 `fetch()` 函数。