当前位置：首页 > 行业动态 > 正文

html5网络连接

admin
行业动态
2025-05-07
3732

HTML5网络连接支持WebSocket实时通信与离线存储，提升交互

HTML5 网络连接详解

传统网络请求：XMLHttpRequest (XHR)

XMLHttpRequest 是 HTML5 之前广泛使用的网络请求方式，支持异步获取数据，常用于 AJAX 操作。

基本用法：创建实例 → 配置请求 → 发送请求 → 监听状态变化。

示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

特点：
- 基于事件回调,需手动处理状态码。
- 支持 JSON、文本、二进制等多种数据格式。
- 兼容性好,但代码较冗长。

现代网络请求：Fetch API

Fetch API 是 HTML5 新增的现代化接口，基于 Promise 简化异步操作。

html5网络连接第1张

基本用法：调用 fetch() → 处理 Promise → 解析响应体。

示例代码：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

特点：
- 语法简洁,支持链式调用。
- 自动封装 HTTP 请求细节（如 CORS）。
- 需手动处理 HTTP 错误（如 response.ok 判断）。

实时双向通信：WebSockets

WebSockets 提供全双工通信通道，适用于实时交互场景（如聊天、游戏）。

基本用法：创建 WebSocket 实例 → 监听事件（open、message、close）→ 发送/接收数据。

示例代码：

const ws = new WebSocket('wss://example.com/socket');
ws.onopen = () => console.log('Connection opened');
ws.onmessage = event => console.log('Message received:', event.data);
ws.onclose = () => console.log('Connection closed');
ws.send('Hello Server');

特点：
- 持久化连接,低延迟。
- 支持二进制数据（如 ArrayBuffer）。
- 需处理断线重连逻辑。

单元表格对比

特性	XMLHttpRequest	Fetch API	WebSockets
底层机制	事件回调	Promise	事件驱动 + 持久连接
数据格式支持	JSON/文本/二进制	JSON/文本/二进制	文本/二进制
代码复杂度	高（需手动管理状态）	低（链式调用）	中（需处理事件）
适用场景	简单 AJAX 请求	现代异步请求	实时双向通信
浏览器兼容性	IE7+	现代浏览器（需 polyfill）	IE10+

WebSocket 状态变化表

事件	触发时机	说明
`open`	连接成功建立	此时可发送数据，表示握手完成。
`message`	收到服务器发送的消息	可处理文本或二进制数据。
`error`	发生错误（如网络中断）	需清理资源并尝试重连。
`close`	连接关闭（主动/被动）	释放资源，通常需触发重连逻辑。