HTTP 通信

// 创建XMLHttpRequest对象
const request = new XMLHttpRequest();
 
// 配置请求：方法为GET，目标URL为用户数据接口
request.open('GET', '/api/users');
 
// 设置响应处理函数
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        const userData = JSON.parse(request.responseText);
        console.log('用户数据:', userData);
    }
};
 
// 发送请求
request.send();

用户数据: [{id: 1, name: "张三", email: "zhang@example.com"}]

// GET请求示例：获取指定用户的信息
function getUserInfo(userId) {
    const request = new XMLHttpRequest();
    request.open('GET', `/api/users/${userId}`);
    
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                const userInfo = JSON.parse(request.responseText);
                displayUserInfo(userInfo);
            } else {
                console.error('获取用户信息失败:', request.statusText);
            }
        }
    };
    
    request.send();
}
 
function displayUserInfo(userInfo) {
    console.log(`用户姓名: ${userInfo.name}`);
    console.log(`用户邮箱: ${userInfo.email}`);
}

// POST请求示例：创建新用户
function createUser(userData) {
    const request = new XMLHttpRequest();
    request.open('POST', '/api/users');
    
    // 设置请求头，指定数据格式为JSON
    request.setRequestHeader('Content-Type', 'application/json');
    
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 201) {
                const newUser = JSON.parse(request.responseText);
                console.log('用户创建成功:', newUser);
            } else {
                console.error('用户创建失败:', request.statusText);
            }
        }
    };
    
    // 将JavaScript对象转换为JSON字符串发送
    request.send(JSON.stringify(userData));
}
 
// 使用示例
createUser({
    name: '李四',
    email: 'lisi@example.com',
    age: 25
});

用户创建成功: {id: 2, name: "李四", email: "lisi@example.com", age: 25}

// 完善的HTTP请求处理函数
function makeRequest(method, url, data = null) {
    return new Promise((resolve, reject) => {
        const request = new XMLHttpRequest();
        request.open(method, url);
        
        // 设置超时时间
        request.timeout = 10000; // 10秒超时
        
        // 如果是POST请求且有数据，设置适当的头部
        if (method === 'POST' && data) {
            request.setRequestHeader('Content-Type', 'application/json');
        }
        
        request.onreadystatechange = function() {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 300) {
                    try {
                        const response = JSON.parse(request.responseText);
                        resolve(response);
                    } catch (error) {
                        reject(new Error('响应数据格式错误'));
                    }
                } else {
                    reject(new Error(`请求失败: ${request.status} ${request.statusText}`));
                }
            }
        };
        
        request.ontimeout = function() {
            reject(new Error('请求超时'));
        };
        
        request.onerror = function() {
            reject(new Error('网络错误'));
        };
        
        request.send(data ? JSON.stringify(data) : null);
    });
}
 
// 使用示例
makeRequest('GET', '/api/products')
    .then(products => {
        console.log('产品列表:', products);
    })
    .catch(error => {
        console.error('获取产品列表失败:', error.message);
    });

// 跨域请求示例
function fetchExternalData() {
    const request = new XMLHttpRequest();
    request.open('GET', 'https://api.external-service.com/data');
    
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status === 200) {
                const data = JSON.parse(request.responseText);
                console.log('外部数据:', data);
            } else {
                console.error('跨域请求失败:', request.statusText);
            }
        }
    };
    
    request.send();
}

// JSONP实现函数
function jsonpRequest(url, callback) {
    // 生成唯一的回调函数名
    const callbackName = 'jsonp_callback_' + Math.random().toString(36).substr(2, 9);
    
    // 在全局作用域创建回调函数
    window[callbackName] = function(data) {
        callback(data);
        // 清理：删除回调函数和script元素
        delete window[callbackName];
        document.head.removeChild(script);
    };
    
    // 创建script元素
    const script = document.createElement('script');
    
    // 构建请求URL，添加回调参数
    const separator = url.includes('?') ? '&' : '?';
    script.src = `${url}${separator}callback=${callbackName}`;
    
    // 添加script元素到文档中，开始加载
    document.head.appendChild(script);
}
 
// 使用示例
jsonpRequest('https://api.example.com/weather?city=beijing', function(data) {
    console.log('天气数据:', data);
});

天气数据: {city: "北京", temperature: 22, weather: "晴朗"}

// 使用Fetch API进行GET请求
async function fetchUserData(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);
        
        if (!response.ok) {
            throw new Error(`HTTP错误: ${response.status}`);
        }
        
        const userData = await response.json();
        console.log('用户数据:', userData);
        return userData;
    } catch (error) {
        console.error('获取用户数据失败:', error.message);
        throw error;
    }
}
 
// 使用Fetch API进行POST请求
async function createUser(userData) {
    try {
        const response = await fetch('/api/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(userData)
        });
        
        if (!response.ok) {
            throw new Error(`创建用户失败: ${response.status}`);
        }
        
        const newUser = await response.json();
        console.log('用户创建成功:', newUser);
        return newUser;
    } catch (error) {
        console.error('创建用户失败:', error.message);
        throw error;
    }
}

// 创建EventSource连接
const eventSource = new EventSource('/api/notifications');
 
// 监听消息事件
eventSource.onmessage = function(event) {
    const notification = JSON.parse(event.data);
    console.log('收到通知:', notification);
    displayNotification(notification);
};
 
// 监听连接打开事件
eventSource.onopen = function() {
    console.log('SSE连接已建立');
};
 
// 监听错误事件
eventSource.onerror = function(error) {
    console.error('SSE连接错误:', error);
};
 
// 监听自定义事件类型
eventSource.addEventListener('urgent', function(event) {
    const urgentMessage = JSON.parse(event.data);
    console.log('紧急消息:', urgentMessage);
    showUrgentAlert(urgentMessage);
});
 
function displayNotification(notification) {
    const notificationDiv = document.createElement('div');
    notificationDiv.className = 'notification';
    notificationDiv.textContent = notification.message;
    document.body.appendChild(notificationDiv);
}
 
function showUrgentAlert(message) {
    alert(`紧急通知: ${message.content}`);
}

// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:8080/chat');
 
// 连接打开时的处理
socket.onopen = function() {
    console.log('WebSocket连接已建立');
    // 发送登录消息
    socket.send(JSON.stringify({
        type: 'login',
        username: '用户123'
    }));
};
 
// 接收消息的处理
socket.onmessage = function(event) {
    const message = JSON.parse(event.data);
    console.log('收到消息:', message);
    
    switch(message.type) {
        case 'chat':
            displayChatMessage(message);
            break;
        case 'user_joined':
            displaySystemMessage(`${message.username} 加入了聊天室`);
            break;
        case 'user_left':
            displaySystemMessage(`${message.username} 离开了聊天室`);
            break;
    }
};
 
// 连接关闭时的处理
socket.onclose = function(event) {
    console.log('WebSocket连接已关闭:', event.code, event.reason);
};
 
// 错误处理
socket.onerror = function(error) {
    console.error('WebSocket错误:', error);
};
 
// 发送聊天消息
function sendChatMessage(text) {
    if (socket.readyState === WebSocket.OPEN) {
        socket.send(JSON.stringify({
            type: 'chat',
            message: text,
            timestamp: new Date().toISOString()
        }));
    }
}
 
function displayChatMessage(message) {
    const messageDiv = document.createElement('div');
    messageDiv.innerHTML = `<strong>${message.username}:</strong> ${message.text}`;
    document.getElementById('chatMessages').appendChild(messageDiv);
}
 
function displaySystemMessage(text) {
    const messageDiv = document.createElement('div');
    messageDiv.className = 'system-message';
    messageDiv.textContent = text;
    document.getElementById('chatMessages').appendChild(messageDiv);
}

WebSocket连接已建立
收到消息: {type: "user_joined", username: "用户456"}
收到消息: {type: "chat", username: "用户456", text: "大家好！"}

// 批处理请求管理器
class BatchRequestManager {
    constructor(endpoint, delay = 100) {
        this.endpoint = endpoint;
        this.delay = delay;
        this.pendingRequests = [];
        this.timeoutId = null;
    }
    
    // 添加请求到批次中
    addRequest(data) {
        return new Promise((resolve, reject) => {
            this.pendingRequests.push({ data, resolve, reject });
            
            // 清除之前的定时器
            if (this.timeoutId) {
                clearTimeout(this.timeoutId);
            }
            
            // 设置新的定时器，延迟执行批处理
            this.timeoutId = setTimeout(() => {
                this.executeBatch();
            }, this.delay);
        });
    }
    
    // 执行批处理请求
    async executeBatch() {
        if (this.pendingRequests.length === 0) return;
        
        const requests = this.pendingRequests.splice(0);
        const batchData = requests.map(req => req.data);
        
        try {
            const response = await fetch(this.endpoint, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ batch: batchData })
            });
            
            const results = await response.json();
            
            // 将结果分发给对应的Promise
            requests.forEach((req, index) => {
                req.resolve(results[index]);
            });
        } catch (error) {
            // 所有请求都失败
            requests.forEach(req => {
                req.reject(error);
            });
        }
    }
}
 
// 使用示例
const batchManager = new BatchRequestManager('/api/batch');
 
// 多个组件可以同时添加请求，它们会被自动合并
Promise.all([
    batchManager.addRequest({ type: 'user', id: 1 }),
    batchManager.addRequest({ type: 'profile', id: 1 }),
    batchManager.addRequest({ type: 'settings', id: 1 })
]).then(results => {
    console.log('批处理结果:', results);
});

// HTTP请求缓存管理器
class RequestCache {
    constructor(maxSize = 100, defaultTTL = 300000) { // 5分钟默认TTL
        this.cache = new Map();
        this.maxSize = maxSize;
        this.defaultTTL = defaultTTL;
    }
    
    // 生成缓存键
    generateKey(url, options = {}) {
        const method = options.method || 'GET';
        const body = options.body || '';
        return `${method}:${url}:${body}`;
    }
    
    // 获取缓存数据
    get(key) {
        const cached = this.cache.get(key);
        if (!cached) return null;
        
        // 检查是否过期
        if (Date.now() > cached.expiry) {
            this.cache.delete(key);
            return null;
        }
        
        return cached.data;
    }
    
    // 设置缓存数据
    set(key, data, ttl = this.defaultTTL) {
        // 如果缓存已满，删除最老的条目
        if (this.cache.size >= this.maxSize) {
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        
        this.cache.set(key, {
            data,
            expiry: Date.now() + ttl
        });
    }
    
    // 带缓存的请求方法
    async fetch(url, options = {}, ttl) {
        const key = this.generateKey(url, options);
        
        // 尝试从缓存获取
        const cached = this.get(key);
        if (cached) {
            console.log('从缓存返回数据:', url);
            return cached;
        }
        
        // 发送实际请求
        console.log('发送网络请求:', url);
        const response = await fetch(url, options);
        const data = await response.json();
        
        // 存入缓存
        this.set(key, data, ttl);
        
        return data;
    }
}
 
// 使用示例
const cache = new RequestCache();
 
// 第一次请求会发送网络请求
cache.fetch('/api/products').then(data => {
    console.log('产品数据:', data);
});
 
// 短时间内的相同请求会从缓存返回
setTimeout(() => {
    cache.fetch('/api/products').then(data => {
        console.log('缓存数据:', data);
    });
}, 1000);

发送网络请求: /api/products
产品数据: [{id: 1, name: "产品A"}, {id: 2, name: "产品B"}]
从缓存返回数据: /api/products
缓存数据: [{id: 1, name: "产品A"}, {id: 2, name: "产品B"}]