### HTML5 中除 Form 表单外的后端数据发送方式 HTML5 提供了多种技术用于从前端向后端发送数据，而不仅仅依赖于传统的 `Form` 表单提交。以下是几种常见的方法及其特点： #### 1. **XMLHttpRequest** 通过 JavaScript 创建一个 `XMLHttpRequest` 对象来实现前后端通信。这种方式支持 GET 和 POST 请求，并允许开发者手动处理请求的状态变化。 ```javascript function sendXHRRequest() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.open('POST', '/server-endpoint'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); var data = 'key=value&anotherKey=anotherValue'; xhr.send(data); } ``` 此方法虽然功能强大，但由于其复杂的配置过程，在现代开发中逐渐被更简洁的技术替代[^1]。 --- #### 2. **Fetch API** 作为 `XMLHttpRequest` 的现代化替代方案，`Fetch API` 提供了一种更加简洁和强大的接口设计模式。它基于 Promise 实现异步操作，使得代码结构更为清晰易读。 ```javascript fetch('/server-endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value', anotherKey: 'anotherValue' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 相比传统 XHR 方法，`Fetch API` 更加直观且易于维护，同时支持更多高级特性如流式传输等[^2]。 --- #### 3. **Server-Sent Events (SSE)** 尽管 SSE 主要用于服务器推送实时更新到客户端，但它也可以作为一种特殊的机制用来完成某些形式的数据交互需求。需要注意的是，这种技术仅适用于 HTTP 协议下的长期连接场景。 ```javascript var source = new EventSource('/sse-endpoint'); source.onmessage = function(event) { console.log(`Message received from server: ${event.data}`); }; // 如果需要主动发消息回服务端，则需额外建立 WebSocket 或者调用 Fetch/XHR。 ``` 不过由于其单向性限制以及浏览器兼容性的考量，在实际项目里较少单独依靠该手段来进行完整的双向通讯[^2]。 --- #### 总结对比分析 | 技术名称 | 易用程度 | 浏览器支持情况 | 是否推荐 | |------------------|---------------|--------------------|-------------------| | XMLHttpRequest | 较低 | 广泛 | 不再优先考虑 | | Fetch API | 高 | 新版本主流浏览器良好 | 推荐 | | Server-Sent Events | 特定用途较高 | 大部分现代环境可以接受 | 根据具体业务决定 | 每一种都有各自适用范围及局限之处，因此选择合适工具取决于特定应用场景的要求[^2]。