Ajax 简明教程

Fetch API Vs XMLHttpRequest

XMLHttpRequest 对象用于与服务器进行异步通信，这意味着可以在后台与服务器交换数据而无需刷新整个页面。XMLHttpRequest 是最常用的技术，这就是为什么它被大多数主流浏览器（如 Google Chrome、Safari、Mozilla Firefox 或 Opera）使用。它还支持纯文本、JSON 数据以及更多数据格式。它非常容易使用，并提供各种方法和属性来执行操作。我们可以使用 XMLHttpRequest() 构造函数创建一个 XMLHttpRequest 对象。

Syntax

variableName = new XMLHttpRequest()

其中，使用 XMLHttpRequest() 构造函数以及一个 new 关键字，我们能够创建一个新的 XMLHttpRequest 对象。必须在调用 send() 函数以向 Web 服务器发送请求之前创建此对象并调用 open() 函数对此对象进行初始化。

Fetch API 提供了一个用于从服务器获取/检索资源的界面。它是 XMLHttpRequest 的一种现代替代方案。它支持请求和响应的通用定义，因此我们可以在需要的情况下将来访问它们以用于缓存 API、服务工作、处理或修改请求和响应等。它非常容易、简单和一致。或者我们可以说它为创建 HTTP 请求和处理响应提供了一种与 XMLHttpRequest 相比更加现代和灵活的方法。它基于 Promise API，该 API 提供了清晰的语法和更好的错误处理。

Syntax

fetch(res)

其中，fetch() 取一个强制参数，即 res。res 参数定义你要获取的资源，它可以是字符串或任何其他对象，也可以是请求对象。除了强制参数，它还可以取一个可选参数，该参数可以是方法、标头、正文、模式缓存、同源等。

Fetch API VS XMLHttpRequest

以下是 Fetch API 和 XMLHttpRequest 之间的区别：

Difference

Fetch API

XMLHttpRequest

Syntax

众所周知，Fetch API 是一个基于承诺的 API，因此它提供了更清晰的语法和更好的错误处理方法。

XHR 基于回调方法，其语法不如 Fetch API 那么好。

Cross-Origin Resource Sharing(CROS)

Fetch API 明智地处理 CROS 请求，无需任何其他配置。

XMLHttpRequest 需要特殊配置来处理或发出跨源请求。

Request and Response Header

Fetch API 提供了更灵活的方法来处理请求和响应标头。

XMLHttpRequest 提供了有限数量的方法来处理请求和响应标头。

Streaming and Parsing

Fetch API 为流式传输和解析大型响应提供了良好的支持，因此它提高了性能并减少了内存使用。

XMLHttpRequest 需要一个自定义程序来获取此功能。

Browser Compatibilities

Fetch API 是新的，因此旧版本的浏览器可能不支持它。

XMLHttpRequest 已使用多年，因此几乎所有浏览器都支持它。

Cookies and Credential Control

Fetch API 对 cookie 和凭据提供了良好的控制，因此与 XMLHttpRequest 相比，我们可以轻松地进行身份验证和授权。

XMLHttpRequest 对 cookie 和凭据的支持较少。

Timeouts

Fetch API 不支持超时，因此该请求将继续进行，直到浏览器选择该请求。

XMLHttpRequest supports timeouts.

Conclusion

因此，这些是 Fetch API 和 XMLHttpRequest 之间的主要区别。与 XMLHttpRequest 相比，Fetch API 更强大、更容易理解。它也受所有现代浏览器的支持，但 XMLHttpRequest 仅受旧浏览器的支持。现在，在下一篇文章中，我们将学习 fetch() 函数。