html5服务器交互

HTML5服务器交互技术详解

传统交互方式：XMLHttpRequest (Ajax)

XMLHttpRequest（XHR）是早期实现客户端与服务器异步通信的核心技术,通过JavaScript创建HTTP请求并处理响应。

特点：

• 支持GET/POST等HTTP方法
• 可处理JSON、XML、文本等多种数据格式
• 需手动解析响应数据
• 依赖浏览器兼容性（IE低版本需ActiveX）

基础用法：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = () => console.log(xhr.response);
xhr.send();

现代替代方案：Fetch API

Fetch API提供更简洁的Promise式接口,支持异步操作和错误处理。

核心优势：

• 语法更简洁（返回Promise对象）
• 支持Request/Response对象（可配置headers/body）
• 天然支持异步.then().catch()链式调用
• 支持Stream流式处理

示例代码：

fetch('/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

实时通信技术

WebSockets

• 用途：全双工实时通信（如聊天室、股票行情）
• 特点：持久连接、极低延迟、双向数据传输
• 示例：

  const ws = new WebSocket('ws://example.com');
  ws.onmessage = event => console.log(event.data);
  ws.send('Hello Server');

Server-Sent Events (SSE)

• 用途：单向实时数据推送（如日志监控、通知系统）
• 特点：自动重连、文本流式传输、服务器主动推送
• 示例：

  const evtSource = new EventSource('/events');
  evtSource.onmessage = event => console.log(event.data);

跨域解决方案

CORS（跨域资源共享）

• 原理：服务器设置Access-Control-头部允许跨域请求
• 限制：需服务器配合配置
• 示例响应头：

  Access-Control-Allow-Origin: 
  Access-Control-Allow-Methods: GET,POST

JSONP（历史方案）

• 原理：通过<script>标签绕过同源策略
• 缺陷：仅支持GET请求，存在安全风险
• 示例：

  function handleResponse(data) { console.log(data); }
  const script = document.createElement('script');
  script.src = 'https://api.example.com/data?callback=handleResponse';
  document.body.appendChild(script);

技术对比表

服务工作者（Service Workers）

• 功能：拦截网络请求、缓存资源、离线支持
• 生命周期：
  • install：首次注册时触发
  • activate：更新后触发
  • fetch：处理网络请求事件
• 示例：

  self.addEventListener('fetch', event => {
    event.respondWith(
      caches.match(event.request).then(cached => {
        return cached || fetch(event.request).then(resp => {
          caches.open('my-cache').then(cache => cache.put(event.request, resp.clone()));
          return resp;
        });
      })
    );
  });

相关问题与解答

Q1：Fetch API与XMLHttpRequest的主要区别是什么？

A：Fetch API基于Promise实现异步流程，语法更简洁且支持Stream流处理，而XHR依赖回调函数和事件监听，Fetch默认不携带Cookie（需手动配置credentials）,XHR会自动携带。

Q2：WebSocket和Server-Sent Events（SSE）如何选择？

A：需要双向实时通信（如聊天应用）时选WebSocket；仅需服务器单向推送数据（如股票价格更新）时用SSE，SSE更轻量且自动重连，WebSocket适合高频双向交互场景