XMLHttpRequest输出详解从基础响应处理到高级数据转换技巧助你轻松掌握Web数据交互核心技能

引言

XMLHttpRequest（简称XHR）是Web开发中的一项核心技术，它允许浏览器在不刷新页面的情况下与服务器进行异步数据交互。作为AJAX（Asynchronous JavaScript and XML）技术的核心组件，XMLHttpRequest为现代Web应用提供了动态、响应式的用户体验。本文将深入探讨XMLHttpRequest的输出处理，从基础的响应处理到高级的数据转换技巧，帮助开发者全面掌握这一Web数据交互的核心技能。

XMLHttpRequest基础

创建XMLHttpRequest对象

XMLHttpRequest对象是所有操作的基础。创建这个对象的方法因浏览器而异，但现代浏览器都支持标准的构造函数方式：

// 创建XMLHttpRequest对象 let xhr = new XMLHttpRequest();

对于非常旧的浏览器（如IE6及更早版本），可能需要使用ActiveXObject：

let xhr; if (window.XMLHttpRequest) { // 现代浏览器 xhr = new XMLHttpRequest(); } else { // 旧版IE xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

基本请求流程

一个基本的XMLHttpRequest请求包括以下步骤：

// 1. 创建XMLHttpRequest对象 let xhr = new XMLHttpRequest(); // 2. 配置请求 xhr.open('GET', 'https://api.example.com/data', true); // 3. 设置回调函数处理响应 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; // 4. 发送请求 xhr.send();

响应处理基础

理解readyState属性

XMLHttpRequest对象有一个readyState属性，表示请求/响应过程的当前阶段。它有五个可能的值：

0: UNSENT - 请求未初始化
1: OPENED - 服务器连接已建立
2: HEADERS_RECEIVED - 请求已接收
3: LOADING - 处理中
4: DONE - 请求已完成且响应已就绪

xhr.onreadystatechange = function() { console.log("Ready state: " + xhr.readyState); if (xhr.readyState === 4) { console.log("Request completed"); } };

HTTP状态码

当readyState为4时，我们可以通过status属性获取HTTP状态码，判断请求是否成功：

200: OK - 请求成功
404: Not Found - 请求的资源不存在
500: Internal Server Error - 服务器内部错误
等等…

xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log("Request successful"); } else if (xhr.status === 404) { console.log("Resource not found"); } else { console.log("Request failed with status: " + xhr.status); } } };

基本响应数据获取

XMLHttpRequest提供了几种方式来获取响应数据：

responseText: 以字符串形式返回响应数据
responseXML: 将响应解析为XML文档对象
response: 根据responseType的设置，返回适当类型的响应数据

xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 获取文本响应 console.log("Text response:", xhr.responseText); // 获取XML响应（如果响应是XML格式） console.log("XML response:", xhr.responseXML); // 获取响应（类型取决于responseType设置） console.log("Response:", xhr.response); } };

同步与异步请求

XMLHttpRequest可以发送同步或异步请求，这通过open()方法的第三个参数控制：

异步请求（推荐）

// 第三个参数为true表示异步请求 xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } } }; xhr.send(); console.log("Request sent, continuing execution...");

在异步请求中，代码会继续执行，不会等待响应返回。

同步请求（不推荐）

// 第三个参数为false表示同步请求 xhr.open('GET', 'https://api.example.com/data', false); xhr.send(); // 代码会在这里阻塞，直到收到响应 if (xhr.status === 200) { console.log(xhr.responseText); } console.log("Response received, continuing execution...");

同步请求会阻塞JavaScript执行，直到收到响应。这通常会导致用户体验不佳，甚至可能导致浏览器界面冻结，因此在实际开发中应避免使用同步请求。

错误处理

网络错误处理

当请求遇到网络问题时（如DNS解析失败、服务器无响应等），status属性将为0：

xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 0) { console.error("Network error or request aborted"); } else if (xhr.status >= 200 && xhr.status < 300) { console.log("Success:", xhr.responseText); } else { console.error("HTTP error:", xhr.status); } } };

超时处理

可以设置请求的超时时间，当请求超过指定时间未完成时触发ontimeout事件：

xhr.open('GET', 'https://api.example.com/data', true); xhr.timeout = 5000; // 5秒超时 xhr.ontimeout = function() { console.error("Request timed out"); }; xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } } }; xhr.send();

使用onerror处理错误

onerror事件处理器会在请求遇到网络错误时触发：

xhr.onerror = function() { console.error("Request failed due to a network error"); };

综合错误处理示例

function makeRequest(url, method, data, callback) { let xhr = new XMLHttpRequest(); xhr.open(method, url, true); xhr.timeout = 10000; // 10秒超时 xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { callback(null, xhr.response); } else { callback(new Error("Request failed with status: " + xhr.status), null); } }; xhr.onerror = function() { callback(new Error("Network error"), null); }; xhr.ontimeout = function() { callback(new Error("Request timed out"), null); }; xhr.onabort = function() { callback(new Error("Request aborted"), null); }; if (data) { xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify(data)); } else { xhr.send(); } } // 使用示例 makeRequest('https://api.example.com/data', 'GET', null, function(error, response) { if (error) { console.error("Error:", error.message); } else { console.log("Response:", response); } });

高级响应处理

设置responseType

responseType属性允许我们指定预期的响应类型，这会影响response属性的返回值类型：

xhr.open('GET', 'https://api.example.com/data', true); xhr.responseType = 'json'; // 期望响应为JSON格式 xhr.onload = function() { if (xhr.status === 200) { // response已经是解析后的JavaScript对象 console.log(xhr.response); console.log(xhr.response.someProperty); } }; xhr.send();

可用的responseType值包括：

""（空字符串）：默认值，响应为字符串（等同于responseText）
"arraybuffer"：响应为ArrayBuffer对象
"blob"：响应为Blob对象
"document"：响应为HTML或XML文档
"json"：响应为JavaScript对象
"text"：响应为字符串（等同于responseText）

处理ArrayBuffer响应

当处理二进制数据时，可以使用arraybuffer类型：

xhr.open('GET', 'https://api.example.com/binary-data', true); xhr.responseType = 'arraybuffer'; xhr.onload = function() { if (xhr.status === 200) { let arrayBuffer = xhr.response; if (arrayBuffer) { let bytes = new Uint8Array(arrayBuffer); console.log("Received " + bytes.length + " bytes of binary data"); // 示例：将ArrayBuffer转换为Base64字符串 let base64 = btoa( String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)) ); console.log("Base64 representation:", base64); } } }; xhr.send();

处理Blob响应

对于文件下载等场景，可以使用blob类型：

xhr.open('GET', 'https://api.example.com/file.pdf', true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { let blob = xhr.response; // 创建下载链接 let downloadUrl = URL.createObjectURL(blob); let a = document.createElement('a'); a.href = downloadUrl; a.download = 'file.pdf'; document.body.appendChild(a); a.click(); // 清理 setTimeout(function() { document.body.removeChild(a); URL.revokeObjectURL(downloadUrl); }, 100); } }; xhr.send();

处理JSON响应

处理JSON数据是最常见的场景之一：

xhr.open('GET', 'https://api.example.com/users', true); xhr.responseType = 'json'; xhr.onload = function() { if (xhr.status === 200) { let users = xhr.response; // 处理用户数据 users.forEach(function(user) { console.log("User ID:", user.id); console.log("Name:", user.name); console.log("Email:", user.email); }); } }; xhr.send();

如果不设置responseType为json，也可以手动解析JSON：

xhr.open('GET', 'https://api.example.com/users', true); xhr.onload = function() { if (xhr.status === 200) { try { let users = JSON.parse(xhr.responseText); // 处理用户数据 users.forEach(function(user) { console.log("User ID:", user.id); console.log("Name:", user.name); console.log("Email:", user.email); }); } catch (e) { console.error("Error parsing JSON:", e); } } }; xhr.send();

处理XML响应

虽然JSON现在更流行，但处理XML响应仍然是必要的：

xhr.open('GET', 'https://api.example.com/data.xml', true); xhr.responseType = 'document'; xhr.onload = function() { if (xhr.status === 200) { let xmlDoc = xhr.response; // 使用DOM方法处理XML let items = xmlDoc.getElementsByTagName('item'); for (let i = 0; i < items.length; i++) { let title = items[i].getElementsByTagName('title')[0].textContent; let description = items[i].getElementsByTagName('description')[0].textContent; console.log("Title:", title); console.log("Description:", description); } } }; xhr.send();

数据转换技巧

JSON数据转换

将JavaScript对象转换为JSON字符串

let user = { id: 1, name: "John Doe", email: "john@example.com", roles: ["admin", "user"], active: true, createdAt: new Date() }; // 将对象转换为JSON字符串 let jsonStr = JSON.stringify(user); console.log(jsonStr); // 输出: {"id":1,"name":"John Doe","email":"john@example.com","roles":["admin","user"],"active":true,"createdAt":"2023-05-15T12:34:56.789Z"} // 使用第二个参数进行格式化（美化输出） let prettyJson = JSON.stringify(user, null, 2); console.log(prettyJson); /* 输出: { "id": 1, "name": "John Doe", "email": "john@example.com", "roles": [ "admin", "user" ], "active": true, "createdAt": "2023-05-15T12:34:56.789Z" } */ // 使用第二个参数（replacer函数）过滤属性 let filteredJson = JSON.stringify(user, function(key, value) { // 过滤掉敏感信息 if (key === 'email') return undefined; return value; }); console.log(filteredJson); // 输出: {"id":1,"name":"John Doe","roles":["admin","user"],"active":true,"createdAt":"2023-05-15T12:34:56.789Z"}

将JSON字符串转换为JavaScript对象

let jsonStr = '{"id":1,"name":"John Doe","email":"john@example.com","roles":["admin","user"],"active":true}'; // 解析JSON字符串 let user = JSON.parse(jsonStr); console.log(user.name); // 输出: John Doe console.log(user.roles[0]); // 输出: admin // 使用reviver函数进行转换 let userWithDates = JSON.parse('{"id":1,"name":"John Doe","createdAt":"2023-05-15T12:34:56.789Z"}', function(key, value) { if (key === 'createdAt') { return new Date(value); } return value; }); console.log(userWithDates.createdAt instanceof Date); // 输出: true

XML数据转换

将字符串转换为XML文档

function parseXmlString(xmlString) { if (window.DOMParser) { // 现代浏览器 let parser = new DOMParser(); return parser.parseFromString(xmlString, "text/xml"); } else { // 旧版IE let xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.loadXML(xmlString); return xmlDoc; } } // 使用示例 let xmlString = "<root><person><name>John Doe</name><age>30</age></person></root>"; let xmlDoc = parseXmlString(xmlString); let name = xmlDoc.getElementsByTagName("name")[0].textContent; console.log(name); // 输出: John Doe

将XML文档转换为字符串

function xmlToString(xmlDoc) { if (window.XMLSerializer) { // 现代浏览器 let serializer = new XMLSerializer(); return serializer.serializeToString(xmlDoc); } else { // 旧版IE return xmlDoc.xml; } } // 使用示例 let xmlDoc = parseXmlString("<root><person><name>John Doe</name></person></root>"); let xmlString = xmlToString(xmlDoc); console.log(xmlString); // 输出: <root><person><name>John Doe</name></person></root>

将XML转换为JavaScript对象

function xmlToObject(xml) { let obj = {}; if (xml.nodeType === 1) { // element node if (xml.attributes.length > 0) { obj["@attributes"] = {}; for (let j = 0; j < xml.attributes.length; j++) { let attribute = xml.attributes.item(j); obj["@attributes"][attribute.nodeName] = attribute.nodeValue; } } } else if (xml.nodeType === 3) { // text node obj = xml.nodeValue.trim(); } // 处理子节点 if (xml.hasChildNodes()) { for (let i = 0; i < xml.childNodes.length; i++) { let item = xml.childNodes.item(i); let nodeName = item.nodeName; if (typeof(obj[nodeName]) === "undefined") { obj[nodeName] = xmlToObject(item); } else { if (typeof(obj[nodeName].push) === "undefined") { let old = obj[nodeName]; obj[nodeName] = []; obj[nodeName].push(old); } obj[nodeName].push(xmlToObject(item)); } } } return obj; } // 使用示例 let xmlString = ` <root> <person id="1"> <name>John Doe</name> <age>30</age> <hobbies> <hobby>Reading</hobby> <hobby>Swimming</hobby> </hobbies> </person> </root> `; let xmlDoc = parseXmlString(xmlString); let obj = xmlToObject(xmlDoc); console.log(obj); /* 输出: { person: { "@attributes": { id: "1" }, name: "John Doe", age: "30", hobbies: { hobby: ["Reading", "Swimming"] } } } */

将JavaScript对象转换为XML

function objectToXml(obj, nodeName) { let xml = ''; if (typeof(obj) === 'object' && obj !== null) { xml += '<' + nodeName; // 处理属性 if (obj["@attributes"]) { for (let attr in obj["@attributes"]) { if (obj["@attributes"].hasOwnProperty(attr)) { xml += ' ' + attr + '="' + obj["@attributes"][attr] + '"'; } } delete obj["@attributes"]; } // 检查是否有子元素 let hasChildElements = false; for (let key in obj) { if (obj.hasOwnProperty(key) && typeof(obj[key]) === 'object') { hasChildElements = true; break; } } if (hasChildElements) { xml += '>'; // 处理子元素 for (let key in obj) { if (obj.hasOwnProperty(key)) { if (Array.isArray(obj[key])) { // 处理数组 for (let i = 0; i < obj[key].length; i++) { xml += objectToXml(obj[key][i], key); } } else { xml += objectToXml(obj[key], key); } } } xml += '</' + nodeName + '>'; } else { xml += '>' + objToString(obj) + '</' + nodeName + '>'; } } else { xml += '<' + nodeName + '>' + obj + '</' + nodeName + '>'; } return xml; } function objToString(obj) { let result = ''; for (let key in obj) { if (obj.hasOwnProperty(key)) { result += obj[key]; } } return result; } // 使用示例 let personObj = { "@attributes": { id: "1" }, name: "John Doe", age: "30", hobbies: { hobby: ["Reading", "Swimming"] } }; let xmlString = objectToXml(personObj, "person"); console.log(xmlString); /* 输出: <person id="1"><name>John Doe</name><age>30</age><hobbies><hobby>Reading</hobby><hobby>Swimming</hobby></hobbies></person> */

表单数据转换

将表单数据转换为URL编码字符串

function formToUrlEncoded(formElement) { let elements = formElement.elements; let pairs = []; for (let i = 0; i < elements.length; i++) { let element = elements[i]; // 只处理有name属性的表单元素 if (element.name && !element.disabled) { if (element.type === 'checkbox' || element.type === 'radio') { if (element.checked) { pairs.push(encodeURIComponent(element.name) + '=' + encodeURIComponent(element.value)); } } else if (element.type === 'select-multiple') { for (let j = 0; j < element.options.length; j++) { if (element.options[j].selected) { pairs.push(encodeURIComponent(element.name) + '=' + encodeURIComponent(element.options[j].value)); } } } else { pairs.push(encodeURIComponent(element.name) + '=' + encodeURIComponent(element.value)); } } } return pairs.join('&'); } // 使用示例 let form = document.getElementById('myForm'); let urlEncodedData = formToUrlEncoded(form); console.log(urlEncodedData); // 输出: name=John+Doe&email=john%40example.com&age=30

将URL编码字符串转换为对象

function urlEncodedToObject(urlEncodedString) { let result = {}; let pairs = urlEncodedString.split('&'); for (let i = 0; i < pairs.length; i++) { let pair = pairs[i].split('='); let key = decodeURIComponent(pair[0]); let value = decodeURIComponent(pair[1] || ''); // 处理重复的key（如复选框） if (result[key]) { if (Array.isArray(result[key])) { result[key].push(value); } else { result[key] = [result[key], value]; } } else { result[key] = value; } } return result; } // 使用示例 let urlEncodedString = 'name=John+Doe&email=john%40example.com&hobbies=Reading&hobbies=Swimming'; let obj = urlEncodedToObject(urlEncodedString); console.log(obj); /* 输出: { name: "John Doe", email: "john@example.com", hobbies: ["Reading", "Swimming"] } */

将对象转换为FormData

function objectToFormData(obj, formKey) { let formData = new FormData(); function appendToFormData(data, rootKey) { if (data === null || data === undefined) { return; } if (typeof data === 'object') { if (Array.isArray(data)) { for (let i = 0; i < data.length; i++) { appendToFormData(data[i], `${rootKey}[${i}]`); } } else if (data instanceof Date) { formData.append(rootKey, data.toISOString()); } else if (data instanceof File) { formData.append(rootKey, data); } else { for (let key in data) { if (data.hasOwnProperty(key)) { if (rootKey) { appendToFormData(data[key], `${rootKey}[${key}]`); } else { appendToFormData(data[key], key); } } } } } else { formData.append(rootKey, data); } } appendToFormData(obj, formKey); return formData; } // 使用示例 let user = { name: "John Doe", email: "john@example.com", profile: { age: 30, address: { street: "123 Main St", city: "New York" } }, hobbies: ["Reading", "Swimming"], avatar: fileInput.files[0] // 假设有一个文件输入元素 }; let formData = objectToFormData(user); console.log(formData);

性能优化

缓存控制

通过设置适当的HTTP头，可以控制缓存行为：

xhr.open('GET', 'https://api.example.com/data', true); // 禁用缓存 xhr.setRequestHeader('Cache-Control', 'no-cache'); xhr.setRequestHeader('Pragma', 'no-cache'); // 或者设置条件请求（使用ETag或Last-Modified） xhr.setRequestHeader('If-None-Match', '"123456789"'); xhr.setRequestHeader('If-Modified-Since', 'Wed, 21 Oct 2015 07:28:00 GMT'); xhr.onload = function() { if (xhr.status === 200) { console.log("New data:", xhr.response); // 保存ETag或Last-Modified用于下次请求 let etag = xhr.getResponseHeader('ETag'); let lastModified = xhr.getResponseHeader('Last-Modified'); } else if (xhr.status === 304) { console.log("Data not modified, using cached version"); } }; xhr.send();

请求压缩

请求压缩数据可以减少传输时间：

xhr.open('GET', 'https://api.example.com/large-data', true); // 通知服务器客户端支持压缩 xhr.setRequestHeader('Accept-Encoding', 'gzip, deflate'); xhr.onload = function() { if (xhr.status === 200) { // 浏览器会自动解压缩响应数据 console.log("Received compressed data"); } }; xhr.send();

分页和限制数据量

对于大量数据，使用分页和限制数据量：

function fetchPaginatedData(url, page, pageSize, callback) { let xhr = new XMLHttpRequest(); // 构建带分页参数的URL let paginatedUrl = url + '?page=' + page + '&pageSize=' + pageSize; xhr.open('GET', paginatedUrl, true); xhr.responseType = 'json'; xhr.onload = function() { if (xhr.status === 200) { callback(null, xhr.response); } else { callback(new Error("Request failed with status: " + xhr.status), null); } }; xhr.onerror = function() { callback(new Error("Network error"), null); }; xhr.send(); } // 使用示例 function loadAllData() { let allData = []; let page = 1; const pageSize = 100; function loadPage() { fetchPaginatedData('https://api.example.com/large-dataset', page, pageSize, function(error, data) { if (error) { console.error("Error:", error); return; } // 将当前页数据添加到总数据中 allData = allData.concat(data.items); // 检查是否还有更多数据 if (data.hasMore) { page++; loadPage(); // 加载下一页 } else { console.log("All data loaded:", allData); // 处理完整数据集 processCompleteDataset(allData); } }); } loadPage(); // 开始加载第一页 } loadAllData();

取消请求

对于不再需要的请求，应该取消以释放资源：

let xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/large-data', true); xhr.onload = function() { if (xhr.status === 200) { console.log("Data received:", xhr.response); } }; xhr.send(); // 在需要时取消请求 // 例如，用户导航到其他页面或组件卸载时 function cancelRequest() { if (xhr.readyState !== 4) { // 如果请求未完成 xhr.abort(); console.log("Request cancelled"); } } // 模拟取消请求 setTimeout(cancelRequest, 100); // 100ms后取消请求

使用Web Workers处理大型响应

对于需要大量处理的响应，可以使用Web Workers避免阻塞主线程：

// 主线程代码 let xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/large-dataset', true); xhr.responseType = 'json'; xhr.onload = function() { if (xhr.status === 200) { // 创建Web Worker let worker = new Worker('data-processor.js'); // 发送数据到Worker worker.postMessage({ action: 'processData', data: xhr.response }); // 接收处理结果 worker.onmessage = function(e) { let result = e.data; console.log("Processed data:", result); // 清理Worker worker.terminate(); }; // 处理Worker错误 worker.onerror = function(e) { console.error("Worker error:", e); worker.terminate(); }; } }; xhr.send();

// data-processor.js (Web Worker代码) self.onmessage = function(e) { if (e.data.action === 'processData') { let data = e.data.data; // 执行复杂的数据处理 let processedData = processData(data); // 将结果发送回主线程 self.postMessage(processedData); } }; function processData(data) { // 复杂的数据处理逻辑 // 例如：过滤、排序、聚合等操作 // 示例：过滤出活跃用户并按名称排序 let activeUsers = data.filter(function(user) { return user.active === true; }); activeUsers.sort(function(a, b) { return a.name.localeCompare(b.name); }); return activeUsers; }

实际应用案例

动态表单提交

function submitForm(formId, url, successCallback, errorCallback) { let form = document.getElementById(formId); if (!form) { errorCallback(new Error("Form not found")); return; } let xhr = new XMLHttpRequest(); xhr.open('POST', url, true); // 设置适当的Content-Type头 let contentType = form.getAttribute('enctype') || 'application/x-www-form-urlencoded'; xhr.setRequestHeader('Content-Type', contentType); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { try { let response = xhr.responseType === 'json' ? xhr.response : JSON.parse(xhr.responseText); successCallback(response); } catch (e) { errorCallback(new Error("Error parsing response: " + e.message)); } } else { errorCallback(new Error("Request failed with status: " + xhr.status)); } }; xhr.onerror = function() { errorCallback(new Error("Network error")); }; // 收集表单数据 let formData; if (contentType === 'multipart/form-data') { // 使用FormData对象处理文件上传 formData = new FormData(form); } else { // 使用URL编码格式 formData = formToUrlEncoded(form); } xhr.send(formData); } // 使用示例 document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); submitForm('myForm', 'https://api.example.com/submit', function(response) { console.log("Form submitted successfully:", response); alert("Form submitted successfully!"); }, function(error) { console.error("Form submission error:", error); alert("Error submitting form: " + error.message); } ); });

文件上传进度

function uploadFile(file, url, progressCallback, successCallback, errorCallback) { let xhr = new XMLHttpRequest(); let formData = new FormData(); formData.append('file', file); xhr.open('POST', url, true); xhr.upload.onprogress = function(e) { if (e.lengthComputable) { let percentComplete = (e.loaded / e.total) * 100; progressCallback(percentComplete, e.loaded, e.total); } }; xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { try { let response = xhr.responseType === 'json' ? xhr.response : JSON.parse(xhr.responseText); successCallback(response); } catch (e) { errorCallback(new Error("Error parsing response: " + e.message)); } } else { errorCallback(new Error("Upload failed with status: " + xhr.status)); } }; xhr.onerror = function() { errorCallback(new Error("Network error during upload")); }; xhr.onabort = function() { errorCallback(new Error("Upload aborted")); }; xhr.send(formData); // 返回xhr对象，以便可以取消上传 return xhr; } // 使用示例 document.getElementById('fileInput').addEventListener('change', function(e) { let file = e.target.files[0]; if (!file) return; let progressBar = document.getElementById('uploadProgress'); let statusText = document.getElementById('uploadStatus'); let xhr = uploadFile( file, 'https://api.example.com/upload', function(percentComplete, loaded, total) { progressBar.value = percentComplete; statusText.textContent = `Uploading: ${Math.round(percentComplete)}% (${formatBytes(loaded)} / ${formatBytes(total)})`; }, function(response) { statusText.textContent = 'Upload completed successfully!'; console.log('Upload response:', response); }, function(error) { statusText.textContent = 'Upload failed: ' + error.message; console.error('Upload error:', error); } ); // 添加取消按钮功能 document.getElementById('cancelUpload').addEventListener('click', function() { xhr.abort(); statusText.textContent = 'Upload cancelled'; }); }); function formatBytes(bytes, decimals = 2) { if (bytes === 0) return '0 Bytes'; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; }

自动保存功能

function AutoSave(options) { this.url = options.url; this.getData = options.getData || function() { return {}; }; this.interval = options.interval || 30000; // 默认30秒 this.onSave = options.onSave || function() {}; this.onError = options.onError || function() {}; this.debounceTime = options.debounceTime || 1000; // 防抖时间 this.timer = null; this.debounceTimer = null; this.isSaving = false; this.pendingSave = false; } // 开始自动保存 AutoSave.prototype.start = function() { this.stop(); // 确保没有其他定时器在运行 var self = this; this.timer = setInterval(function() { self.save(); }, this.interval); console.log("AutoSave started with interval:", this.interval, "ms"); }; // 停止自动保存 AutoSave.prototype.stop = function() { if (this.timer) { clearInterval(this.timer); this.timer = null; } if (this.debounceTimer) { clearTimeout(this.debounceTimer); this.debounceTimer = null; } console.log("AutoSave stopped"); }; // 触发保存（带防抖） AutoSave.prototype.triggerSave = function() { var self = this; // 清除之前的防抖定时器 if (this.debounceTimer) { clearTimeout(this.debounceTimer); } // 设置新的防抖定时器 this.debounceTimer = setTimeout(function() { self.save(); }, this.debounceTime); }; // 执行保存 AutoSave.prototype.save = function() { // 如果正在保存，标记为有待处理的保存 if (this.isSaving) { this.pendingSave = true; return; } var self = this; this.isSaving = true; // 获取数据 var data = this.getData(); // 发送请求 var xhr = new XMLHttpRequest(); xhr.open('POST', this.url, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { self.isSaving = false; if (xhr.status >= 200 && xhr.status < 300) { try { var response = JSON.parse(xhr.responseText); self.onSave(response); } catch (e) { self.onError(new Error("Error parsing response: " + e.message)); } } else { self.onError(new Error("Save failed with status: " + xhr.status)); } // 如果有待处理的保存，再次执行保存 if (self.pendingSave) { self.pendingSave = false; self.save(); } }; xhr.onerror = function() { self.isSaving = false; self.onError(new Error("Network error during save")); // 如果有待处理的保存，再次执行保存 if (self.pendingSave) { self.pendingSave = false; self.save(); } }; xhr.send(JSON.stringify(data)); }; // 使用示例 document.addEventListener('DOMContentLoaded', function() { // 创建自动保存实例 var autoSave = new AutoSave({ url: 'https://api.example.com/auto-save', getData: function() { // 获取表单数据 var formData = { title: document.getElementById('title').value, content: document.getElementById('content').value, tags: document.getElementById('tags').value.split(',').map(function(tag) { return tag.trim(); }) }; return formData; }, interval: 30000, // 每30秒自动保存一次 debounceTime: 2000, // 输入停止2秒后触发保存 onSave: function(response) { console.log('Auto-save successful:', response); document.getElementById('saveStatus').textContent = 'Saved: ' + new Date().toLocaleTimeString(); }, onError: function(error) { console.error('Auto-save error:', error); document.getElementById('saveStatus').textContent = 'Save failed: ' + error.message; } }); // 启动自动保存 autoSave.start(); // 监听表单输入变化，触发保存 var formElements = document.querySelectorAll('#editorForm input, #editorForm textarea'); formElements.forEach(function(element) { element.addEventListener('input', function() { autoSave.triggerSave(); document.getElementById('saveStatus').textContent = 'Saving...'; }); }); // 页面离开前确保所有更改已保存 window.addEventListener('beforeunload', function(e) { if (autoSave.isSaving || autoSave.pendingSave) { var message = 'You have unsaved changes. Are you sure you want to leave?'; e.returnValue = message; return message; } }); });

最佳实践和注意事项

安全考虑

CSRF防护：对于修改数据的请求，使用CSRF令牌：

function getCsrfToken() { // 从meta标签获取CSRF令牌 let metaTag = document.querySelector('meta[name="csrf-token"]'); if (metaTag) { return metaTag.getAttribute('content'); } // 或者从cookie获取 let cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { let cookie = cookies[i].trim(); if (cookie.indexOf('XSRF-TOKEN=') === 0 || cookie.indexOf('csrf-token=') === 0) { return cookie.substring(cookie.indexOf('=') + 1); } } return null; } // 在请求中包含CSRF令牌 xhr.open('POST', 'https://api.example.com/update', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('X-CSRF-Token', getCsrfToken()); xhr.send(JSON.stringify(data));

输入验证：始终在发送前验证用户输入：

function validateUserData(userData) { if (!userData.name || userData.name.trim() === '') { throw new Error('Name is required'); } if (!userData.email || userData.email.trim() === '') { throw new Error('Email is required'); } // 简单的电子邮件格式验证 let emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/; if (!emailRegex.test(userData.email)) { throw new Error('Invalid email format'); } // 其他验证规则... return true; } try { let userData = { name: document.getElementById('name').value, email: document.getElementById('email').value }; validateUserData(userData); // 验证通过，发送请求 xhr.open('POST', 'https://api.example.com/users', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify(userData)); } catch (error) { console.error('Validation error:', error.message); alert(error.message); }

敏感数据处理：避免在URL中包含敏感信息，使用POST请求和请求体：

// 错误示例：敏感信息在URL中 xhr.open('GET', 'https://api.example.com/users?password=secret123', true); // 正确示例：敏感信息在请求体中 xhr.open('POST', 'https://api.example.com/authenticate', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ username: 'user1', password: 'secret123' }));

可维护性建议

封装XMLHttpRequest：创建可重用的请求函数：

/** * 发送HTTP请求 * @param {Object} options - 请求选项 * @param {string} options.method - HTTP方法 * @param {string} options.url - 请求URL * @param {Object} [options.headers] - 请求头 * @param {Object|string} [options.data] - 请求数据 * @param {string} [options.responseType] - 响应类型 * @param {number} [options.timeout] - 超时时间（毫秒） * @param {function} [options.onProgress] - 上传进度回调 * @param {function} callback - 回调函数 */ function httpRequest(options, callback) { var xhr = new XMLHttpRequest(); xhr.open(options.method, options.url, true); // 设置请求头 if (options.headers) { for (var header in options.headers) { if (options.headers.hasOwnProperty(header)) { xhr.setRequestHeader(header, options.headers[header]); } } } // 设置响应类型 if (options.responseType) { xhr.responseType = options.responseType; } // 设置超时 if (options.timeout) { xhr.timeout = options.timeout; } // 设置上传进度回调 if (options.onProgress && xhr.upload) { xhr.upload.onprogress = options.onProgress; } xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { callback(null, xhr.response); } else { var error = new Error("Request failed with status: " + xhr.status); error.statusCode = xhr.status; error.response = xhr.response; callback(error, null); } }; xhr.onerror = function() { var error = new Error("Network error"); callback(error, null); }; xhr.ontimeout = function() { var error = new Error("Request timed out"); callback(error, null); }; // 发送请求 if (options.data) { if (typeof options.data === 'string') { xhr.send(options.data); } else if (options.data instanceof FormData) { xhr.send(options.data); } else { xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify(options.data)); } } else { xhr.send(); } return xhr; } // 使用示例 httpRequest({ method: 'GET', url: 'https://api.example.com/users', responseType: 'json' }, function(error, users) { if (error) { console.error('Error fetching users:', error); return; } console.log('Users:', users); });

使用Promise封装：提供更现代的API：

/** * 发送HTTP请求（Promise版本） * @param {Object} options - 请求选项 * @return {Promise} 返回Promise对象 */ function httpPromise(options) { return new Promise(function(resolve, reject) { httpRequest(options, function(error, response) { if (error) { reject(error); } else { resolve(response); } }); }); } // 使用示例 httpPromise({ method: 'GET', url: 'https://api.example.com/users', responseType: 'json' }) .then(function(users) { console.log('Users:', users); return users; }) .catch(function(error) { console.error('Error fetching users:', error); throw error; });

实现请求重试机制：

/** * 带重试机制的HTTP请求 * @param {Object} options - 请求选项 * @param {number} [maxRetries=3] - 最大重试次数 * @param {number} [retryDelay=1000] - 重试延迟（毫秒） * @return {Promise} 返回Promise对象 */ function httpWithRetry(options, maxRetries, retryDelay) { maxRetries = maxRetries || 3; retryDelay = retryDelay || 1000; var retryCount = 0; function attempt() { return httpPromise(options) .catch(function(error) { retryCount++; if (retryCount <= maxRetries && shouldRetry(error)) { console.log('Retrying request (' + retryCount + '/' + maxRetries + ')...'); return new Promise(function(resolve) { setTimeout(function() { resolve(attempt()); }, retryDelay * retryCount); // 指数退避 }); } throw error; }); } return attempt(); } function shouldRetry(error) { // 对于网络错误、5xx服务器错误或超时进行重试 return !error.statusCode || error.statusCode >= 500 || error.message === 'Request timed out'; } // 使用示例 httpWithRetry({ method: 'GET', url: 'https://api.example.com/unstable-data', responseType: 'json' }, 3, 1000) .then(function(data) { console.log('Data:', data); }) .catch(function(error) { console.error('Failed after retries:', error); });

性能优化建议

批量请求：合并多个小请求为一个批量请求：

/** * 批量请求 * @param {Array} requests - 请求对象数组 * @param {string} batchUrl - 批量处理URL * @return {Promise} 返回Promise对象 */ function batchRequests(requests, batchUrl) { // 准备批量请求数据 var batchData = { requests: requests.map(function(req) { return { method: req.method, path: req.url.replace(batchUrl, ''), // 移除基础URL部分 headers: req.headers || {}, body: req.data }; }) }; return httpPromise({ method: 'POST', url: batchUrl, data: batchData, responseType: 'json' }) .then(function(responses) { // 将批量响应映射回原始请求 return requests.map(function(req, index) { var response = responses[index]; if (response.status >= 200 && response.status < 300) { return response.body; } else { var error = new Error("Batch request failed"); error.statusCode = response.status; error.response = response.body; throw error; } }); }); } // 使用示例 var requests = [ { method: 'GET', url: 'https://api.example.com/users/1' }, { method: 'GET', url: 'https://api.example.com/users/2' }, { method: 'GET', url: 'https://api.example.com/users/3' } ]; batchRequests(requests, 'https://api.example.com/batch') .then(function(results) { console.log('User 1:', results[0]); console.log('User 2:', results[1]); console.log('User 3:', results[2]); }) .catch(function(error) { console.error('Batch request error:', error); });

请求缓存：实现简单的请求缓存：

/** * 简单的请求缓存 */ var RequestCache = function() { this.cache = {}; this.pendingRequests = {}; }; /** * 获取缓存数据或发送请求 * @param {string} key - 缓存键 * @param {Object} options - 请求选项 * @param {number} [ttl=60000] - 缓存生存时间（毫秒） * @return {Promise} 返回Promise对象 */ RequestCache.prototype.get = function(key, options, ttl) { ttl = ttl || 60000; // 默认缓存1分钟 // 检查缓存 if (this.cache[key] && Date.now() - this.cache[key].timestamp < ttl) { return Promise.resolve(this.cache[key].data); } // 检查是否有进行中的请求 if (this.pendingRequests[key]) { return this.pendingRequests[key]; } // 创建新请求 var self = this; var promise = httpPromise(options) .then(function(data) { // 缓存结果 self.cache[key] = { data: data, timestamp: Date.now() }; // 清除进行中的请求 delete self.pendingRequests[key]; return data; }) .catch(function(error) { // 清除进行中的请求 delete self.pendingRequests[key]; throw error; }); // 存储进行中的请求 this.pendingRequests[key] = promise; return promise; }; /** * 清除缓存 * @param {string} key - 要清除的缓存键，如果不提供则清除所有缓存 */ RequestCache.prototype.clear = function(key) { if (key) { delete this.cache[key]; } else { this.cache = {}; } }; // 使用示例 var requestCache = new RequestCache(); // 第一次请求会发送HTTP请求 requestCache.get('user-1', { method: 'GET', url: 'https://api.example.com/users/1', responseType: 'json' }) .then(function(user) { console.log('User from API:', user); // 第二次请求会从缓存获取 return requestCache.get('user-1', { method: 'GET', url: 'https://api.example.com/users/1', responseType: 'json' }); }) .then(function(user) { console.log('User from cache:', user); });

请求节流：避免短时间内发送过多请求：

/** * 节流函数 * @param {function} func - 要节流的函数 * @param {number} delay - 延迟时间（毫秒） * @return {function} 节流后的函数 */ function throttle(func, delay) { var lastCall = 0; var timeout = null; return function() { var context = this; var args = arguments; var now = Date.now(); // 如果距离上次调用超过延迟时间，立即执行 if (now - lastCall > delay) { lastCall = now; func.apply(context, args); } // 否则，在延迟时间后执行 else if (!timeout) { timeout = setTimeout(function() { lastCall = Date.now(); timeout = null; func.apply(context, args); }, delay - (now - lastCall)); } }; } // 使用示例：节流自动保存 var throttledSave = throttle(function() { autoSave.save(); }, 2000); // 最多每2秒保存一次 // 监听输入变化，使用节流函数 document.getElementById('content').addEventListener('input', function() { throttledSave(); });