需依据场景选WebSocket或Ajax：WebSocket用于实时双向通信，需创建连接、监听事件、处理重连；Ajax用XMLHttpRequest或fetch实现异步请求；跨域需CORS配置或代理。
如果您希望在HTML5页面中实现前后端实时或异步数据交互，则需依据通信场景选择WebSocket或Ajax技术。以下是两种通信方式的具体设置方法：
一、使用WebSocket建立双向实时通信
WebSocket协议允许客户端与服务器之间建立持久化TCP连接，实现低延迟、全双工的数据交换，适用于聊天、实时通知等场景。
1、在HTML文件中声明WebSocket对象，传入服务端WebSocket URL（如ws://localhost:8080）。
2、监听onopen事件，在连接成功后调用send()方法发送初始消息。
立即学习“前端免费学习笔记（深入）”；
3、绑定onmessage事件处理函数，接收服务器推送的JSON字符串并解析为JavaScript对象。
4、通过onerror和onclose事件分别捕获连接异常与主动断开状态，执行相应提示逻辑。
5、调用websocket.close()方法可主动终止连接，避免资源泄漏。
二、使用XMLHttpRequest发起传统Ajax请求
XMLHttpRequest提供基于HTTP的异步请求能力，适合一次性获取或提交数据，兼容性高且无需额外服务端协议支持。
1、创建XMLHttpRequest实例：const xhr = new XMLHttpRequest();
2、调用xhr.open("GET", "/api/data", true)设定请求方式、路径与异步标志。
3、设置xhr.onreadystatechange回调，在xhr.readyState === 4且xhr.status === 200时读取xhr.responseText。
4、若需发送JSON数据，将xhr.setRequestHeader("Content-Type", "application/json")并在send()中传入JSON.stringify()结果。
5、对响应内容进行JSON.parse()解析，并更新DOM节点显示最新数据。
三、使用fetch API替代Ajax实现现代异步通信
fetch是HTML5标准推荐的原生网络请求接口，基于Promise设计，语法简洁，天然支持async/await写法。
1、调用fetch("/api/user")发起GET请求，返回Promise对象。
2、链式调用.then(response => response.json())自动解析JSON响应体。
3、在后续.then()中处理结构化数据，例如将用户列表渲染至
- 元素内。
4、使用catch()捕获网络失败或解析错误，显示请求失败，请检查网络连接提示。
5、若需POST提交，构造包含method、headers、body字段的配置对象作为fetch第二参数。
四、处理跨域通信限制
当前端页面域名与后端API地址不一致时，浏览器会阻止非同源请求，需通过服务端配置或代理绕过CORS策略。
1、后端响应头中添加Access-Control-Allow-Origin: * 或指定可信域名。
2、设置Access-Control-Allow-Methods允许PUT、DELETE等非简单方法。
3、若携带Cookie，前端fetch需增加credentials: "include"选项，同时服务端必须指定具体域名而非通配符。
4、开发阶段可在webpack-dev-server中配置proxy项，将/api/**请求代理至http://localhost:3000。
5、Nginx反向代理配置location /api { proxy_pass http://backend; }可统一暴露同源接口路径。
五、WebSocket连接状态与重连机制实现
因网络波动导致WebSocket意外断开时，需主动检测并重建连接以保障通信连续性。
1、定义全局变量let socket = null;及重试计数器let retryCount = 0;
2、在onclose事件中判断event.code是否为1006（异常关闭），若是则启动延时重连。
3、使用setTimeout(() => connect(), Math.min(1000 * 2 ** retryCount, 30000))实现指数退避。
4、每次重连前递增retryCount，达到阈值（如5次）后停止尝试并提示无法连接到服务器，请稍后重试。
5、连接成功后重置retryCount = 0，确保下次断连从基础延迟开始。
