js实现通信
JavaScript 实现通信的方法
JavaScript 提供了多种方式实现不同场景下的通信，包括浏览器与服务器、页面间、跨域等场景。
原生 AJAX 通信
使用 XMLHttpRequest 对象实现异步数据请求：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();Fetch API
现代浏览器支持的更简洁的异步请求方式：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));WebSocket 实时通信
建立持久连接实现双向实时通信：
const socket = new WebSocket('wss://echo.websocket.org');
socket.onopen = () => socket.send('Hello Server!');
socket.onmessage = event => console.log(event.data);postMessage 跨窗口通信
实现不同窗口/iframe 间的安全通信：
// 父窗口
iframe.contentWindow.postMessage('hello', 'https://child-origin.com');
// 子窗口
window.addEventListener('message', event => {
if (event.origin === 'https://parent-origin.com') {
console.log(event.data);
}
});Server-Sent Events (SSE)
服务器向客户端推送单向事件流：
const eventSource = new EventSource('/updates');
eventSource.onmessage = event => {
console.log('New update:', event.data);
};WebRTC 点对点通信
实现浏览器间直接数据传输（适合视频聊天等场景）：
// 需要先建立信令服务器交换SDP信息
const pc = new RTCPeerConnection();
pc.onicecandidate = event => {
if (event.candidate) {
// 通过信令服务器发送候选地址
}
};
pc.ondatachannel = event => {
const channel = event.channel;
channel.onmessage = event => console.log(event.data);
};每种通信方式适用于不同场景，选择时需考虑浏览器兼容性、实时性要求、安全限制等因素。现代应用通常结合使用多种方式，例如用 WebSocket 实现实时通知，用 Fetch 处理常规 API 请求。
