HTML 发送 HTTP 请求的常见方法有：使用 XMLHttpRequest 对象、Fetch API、以及通过表单提交。 在这几种方法中，Fetch API 是现代前端开发中最推荐的方式，因为它更加简洁、易读且支持 Promise 和 Async/Await 语法。
一、使用 XMLHttpRequest 对象
XMLHttpRequest 是最早的发送 HTTP 请求的方式，虽然现在有了更加现代化的方式，但了解它仍然是有必要的。
1. 创建 XMLHttpRequest 对象
首先，你需要创建一个 XMLHttpRequest 对象：
var xhr = new XMLHttpRequest();
2. 初始化请求
接下来，你需要初始化请求。这个方法接收三个参数：请求类型（GET 或 POST）、请求的 URL 和一个布尔值，表示是否异步：
xhr.open('GET', 'https://example.com/api/data', true);
3. 设置请求头（可选）
如果需要，你可以设置请求头，特别是在发送 POST 请求时需要设置 Content-Type：
xhr.setRequestHeader('Content-Type', 'application/json');
4. 发送请求
最后，发送请求。如果是 GET 请求，直接调用 send() 方法即可。如果是 POST 请求，可以将请求体作为参数传递给 send() 方法：
xhr.send();
5. 处理响应
你需要在 onreadystatechange 事件中处理响应：
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
二、使用 Fetch API
Fetch API 是现代浏览器中替代 XMLHttpRequest 的新方式，它使用 Promise 来处理异步操作，这使得代码更加简洁和易于理解。
1. 发送 GET 请求
使用 Fetch API 发送 GET 请求非常简单，只需调用 fetch() 方法并传入请求的 URL：
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
2. 发送 POST 请求
发送 POST 请求时，你需要传入一个配置对象来指定请求方法和请求体：
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
三、通过表单提交
表单提交是最传统的发送 HTTP 请求的方法，它适用于简单的表单数据提交。
1. 创建 HTML 表单
你需要创建一个 HTML 表单，并设置 action 和 method 属性：
2. 处理表单提交
表单提交会自动发送 HTTP 请求并重定向到服务器的响应页面。你可以使用 JavaScript 来处理表单提交并阻止默认行为，以便在提交表单时执行自定义逻辑：
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData(this);
fetch(this.action, {
method: this.method,
body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
});
四、综合比较
1. 易用性
XMLHttpRequest 虽然功能强大，但其代码较为冗长，需要处理多个事件和状态变化。相比之下，Fetch API 更加简洁和易于使用。
2. 错误处理
Fetch API 使用 Promise 处理异步操作，提供了更好的错误处理机制。你可以使用 catch 方法捕获错误，而不需要像 XMLHttpRequest 那样手动检查状态码。
3. 浏览器兼容性
XMLHttpRequest 是所有现代浏览器都支持的标准，而 Fetch API 只有在较新的浏览器中才支持。如果需要兼容老旧浏览器，可以使用 polyfill 来支持 Fetch API。
五、实际应用场景
在实际项目中，选择哪种方式取决于具体需求和浏览器兼容性要求。如果需要支持老旧浏览器或需要处理复杂的请求和响应，可以选择 XMLHttpRequest。而在现代前端开发中，Fetch API 通常是首选。
如果你正在管理一个研发项目并需要一个高效的项目管理系统，可以考虑使用 研发项目管理系统PingCode 或 通用项目协作软件Worktile，它们可以帮助你更好地管理项目和团队，提高工作效率。
总之，理解和掌握这几种发送 HTTP 请求的方法，可以让你在前端开发中更加游刃有余，选择最适合的工具来完成任务。
相关问答FAQs：
1. HTML如何发送HTTP请求？
HTML本身并不能直接发送HTTP请求，但可以通过JavaScript与服务器进行通信。以下是一种常用的方法：
使用XMLHttpRequest对象：HTML页面可以使用XMLHttpRequest对象来发送HTTP请求。通过创建一个XMLHttpRequest对象，你可以指定请求的URL、请求的方法（GET或POST）以及其他必要的参数。然后，使用该对象的send()方法发送请求，并通过监听readystatechange事件来处理服务器的响应。
2. HTML如何处理服务器的响应？
一旦HTML页面发送了HTTP请求并得到服务器的响应，可以使用JavaScript来处理响应数据。以下是一些常见的处理方法：
解析响应数据：根据响应的数据类型（如JSON、XML或纯文本），使用相应的方法将响应数据解析为可用的JavaScript对象或字符串。
更新页面内容：根据服务器响应的数据，可以使用JavaScript来更新页面中的内容，例如更新文本、插入新的HTML元素或修改样式。
处理错误：如果服务器返回的响应状态码表明请求出错（如404或500），可以使用JavaScript来处理错误，例如显示错误消息或采取其他适当的操作。
3. HTML如何处理异步请求？
在HTML中处理异步请求的常见方法是使用JavaScript中的回调函数或Promise。以下是一些常见的处理异步请求的方法：
使用回调函数：在发起异步请求时，指定一个回调函数作为参数。当请求完成并获得响应时，回调函数将被调用，并传递响应数据。在回调函数中，你可以处理响应数据或执行其他操作。
使用Promise：使用Promise可以更好地处理异步请求。可以使用Promise对象来封装异步操作，并使用then()方法指定在请求完成时要执行的操作。通过使用Promise，可以更清晰地处理异步请求的成功和失败情况。
希望以上解答能对你有所帮助！如果还有其他问题，请随时提问。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/2992775