HTTP 表单元素与 Fetch 和 XMLHttpRequest

Question

我目前正在学习 Web 开发并遇到了 HTTP。让我困惑的一件事是如何准确地发出 HTTP 请求。在我观看的视频中，他们发送 HTTP 请求的主要方式是通过表单元素。做了更多研究，我还发现 HTTP 请求可以通过 Fetch 和 XMLHttpRequest 手动完成。

所以我对这三种方法如何工作以及选择其中一种的好处有点困惑。如果我犯了任何错误，我深表歉意，但我对整个问题很困惑。我尝试使用 Fetch 手动发送 HTTP 请求，例如 PUT 和 POST，但这有点混乱。大多数教程都是使用表单元素来执行此操作，所以现在我想知道是否应该这样做。

我还阅读了通过 JavaScript 发送表单，但它完全超出了我的理解范围。

所以我尝试查找各种教程和网站来解释使用 HTML/CSS 和 Javascript 的 HTTP 请求问题。我希望有人能解释 Forms、Fetch 和 XMLHttpRequest 之间的区别。如果在这种情况下适用的话，使用其中一种相对于另一种的权衡是什么？

Answer 1

1. 表格：

   • 工作原理：表单是 HTML 元素，允许用户输入数据并将其提交到服务器。当您提交表单时，浏览器通常会向服务器发送 HTTP 请求。
   • 用例：表单适合基本数据提交，尤其是当您有文本字段、复选框等用户输入时。
   • 权衡：表单适用于简单的情况，但当您需要对请求进行更多控制或处理更复杂的数据时，表单可能不如其他方法灵活或强大。

2. XMLHttp请求：

   • 工作原理：XMLHttpRequest 是一个较旧的 JavaScript API，用于发出 HTTP 请求。它提供了一种发送 HTTP 或 HTTPS 请求并直接在浏览器中处理响应的方法。
   • 用例：它用途广泛，可以处理各种请求类型。它受到广泛支持，但与较新的选项相比，它具有更复杂的 API。
   • 权衡：与 Fetch 相比，它被认为有些过时，并且 API 不太直观。然而，它仍然在某些场景中使用，特别是在处理较旧的代码库时。

3. 获取API：

   • 工作原理：Fetch 是一种用于发出 HTTP 请求的现代 JavaScript API。它提供了比 XMLHttpRequest 更简单、更强大的接口。
   • 用例：Fetch 是现代 Web 开发中发出 HTTP 请求的推荐方法。与 XMLHttpRequest 相比，它支持 Promise 并提供更清晰的语法。
   • 权衡：它可能不会在旧版浏览器中得到广泛支持，但随着更多浏览器的不断更新，这不再是一个问题。

权衡和建议：

• 如果您正在开发现代项目并且不需要支持旧版浏览器，建议使用 Fetch API，因为它简单且灵活。
• 如果您正在处理较旧的代码库或需要支持较旧的浏览器，您可能仍然会遇到使用中的 XMLHttpRequest。
• 表单适合简单的数据提交，但可能缺乏更复杂场景所需的控制和灵活性。

总而言之，Fetch 由于其简单性和强大功能而通常是现代 Web 开发中发出 HTTP 请求的首选，但了解 Forms 和 XMLHttpRequest 可能会很有帮助，尤其是在处理现有代码或特定用例时。

Answer 2

我不是这个主题的专家，但

Form

、

fetch

和

XMLHttpRequest

有不同的用例

1. Fetch 优于 XMLHttpRequest，因为它更新并且允许更现代的接口来执行请求。与表单相比，您可以通过 JavaScript 选择正文/请求内容。
2. 当您想发送表格时使用表格。表单元素根据其子元素发送数据。此外，发送表单也会重新加载页面。当我想从用户界面向后端服务器发送数据（例如登录页面）时，我更喜欢表单元素