引言：AJAX技术的革命性意义
在现代Web开发的历史进程中，AJAX（Asynchronous JavaScript and XML）技术的出现无疑是一个里程碑式的突破。它彻底改变了用户与网页交互的方式，使得网页能够在不重新加载整个页面的情况下与服务器进行数据交换。这种”无刷新”的体验极大地提升了用户界面的响应性和流畅度，为后来的单页应用（SPA）和现代Web应用框架奠定了基础。
AJAX的核心在于
XMLHttpRequest
对象，它是实现异步通信的基石。尽管现代开发中我们更多使用
fetch
API或各种封装库，但深入理解
XMLHttpRequest
的工作原理对于掌握Web通信机制至关重要。本文将深入剖析
XMLHttpRequest
对象的内部机制，详细讲解如何利用它实现网页无刷新数据交互与异步通信，并通过完整的代码示例展示其实际应用。
XMLHttpRequest对象的基本概念
什么是XMLHttpRequest？
XMLHttpRequest
（简称XHR）是一个浏览器内置的JavaScript对象，它提供了在客户端和服务器之间传输数据的能力，而无需刷新整个页面。通过这个对象，JavaScript可以：
发送HTTP/HTTPS请求
：向服务器发起各种类型的请求（GET、POST、PUT、DELETE等）
接收服务器响应
：获取服务器返回的数据（文本、XML、JSON等）
处理响应状态
：监控请求的进度和状态变化
操作响应头
：获取或设置HTTP请求/响应头信息
历史与发展
XMLHttpRequest
最初由微软在IE5中以ActiveX组件的形式引入，后来被其他浏览器厂商采纳并标准化。如今，它已成为W3C标准，所有现代浏览器都原生支持。虽然名称中包含”XML”，但它实际上可以处理任何类型的数据，包括JSON、文本、HTML甚至二进制数据。
XMLHttpRequest对象的创建与初始化
创建XHR对象实例
在使用
XMLHttpRequest
之前，首先需要创建一个实例。由于历史原因，不同浏览器的创建方式略有不同，但现代浏览器都支持标准的构造函数方式：
// 现代浏览器标准方式
const xhr = new XMLHttpRequest();

// 兼容旧版IE（IE5/IE6）的写法
function createXHR() {
if (typeof XMLHttpRequest !== ‘undefined’) {
return new XMLHttpRequest();
} else if (typeof ActiveXObject !== ‘undefined’) {
// IE5/IE6使用ActiveX
const versions = [
‘MSXML2.XMLHttp.6.0’,
‘MSXML2.XMLHttp.3.0’,
‘MSXML2.XMLHttp’
];
for (let i = 0; i < versions.length; i++) { try { return new ActiveXObject(versions[i]); } catch (e) { // 继续尝试下一个版本 } } } throw new Error('您的浏览器不支持XMLHttpRequest'); } // 使用创建函数 const xhr = createXHR(); 初始化请求配置 创建实例后，需要使用 open() 方法初始化请求。该方法接受多个参数来配置请求： xhr.open(method, url, async, user, password); 参数说明： method ：HTTP请求方法，如’GET’、’POST’、’PUT’、’DELETE’等 url ：请求的目标URL，可以是相对路径或绝对路径 async ：布尔值，指定是否异步发送请求（默认为true） user ：可选，用于HTTP基本认证的用户名 password ：可选，用于HTTP基本认证的密码 完整示例： // 创建XHR实例 const xhr = new XMLHttpRequest(); // 配置GET请求（异步） xhr.open('GET', 'https://api.example.com/data', true); // 配置带认证的POST请求（同步） xhr.open('POST', 'https://api.example.com/submit', false, 'username', 'password'); XMLHttpRequest的核心属性详解 XMLHttpRequest 对象提供了多个重要属性，用于监控请求状态和获取响应数据： 1. readyState属性 readyState 属性表示请求/响应过程的当前状态，这是一个只读属性，其可能的值包括： 值 状态 描述 0 UNSENT 已创建XHR对象，但尚未调用open()方法 1 OPENED 已调用open()方法，但尚未调用send()方法 2 HEADERS_RECEIVED 已调用send()方法，且响应头已接收 3 LOADING 正在接收响应体（可能只接收到部分） 4 DONE 请求已完成，整个响应数据已接收 2. status属性 status 属性表示HTTP响应状态码，如200（成功）、404（未找到）、500（服务器错误）等。 3. statusText属性 statusText 属性包含HTTP响应的状态文本，如”OK”、”Not Found”等。 4. response相关属性 // 原始响应数据（可能是字符串、ArrayBuffer、Blob等） xhr.response; // 响应数据的类型（"arraybuffer"、"blob"、"document"、"json"、"text"） xhr.responseType; // 响应数据的文本形式（已废弃，建议使用response） xhr.responseText; // 响应数据的XML文档形式（已废弃，建议使用response） xhr.responseXML; 5. withCredentials属性 withCredentials 属性是一个布尔值，用于指定是否在跨域请求中包含凭据（如cookies、HTTP认证信息）： // 包含跨域请求的凭据 xhr.withCredentials = true; XMLHttpRequest的核心方法详解 1. open()方法 如前所述， open() 方法用于初始化请求。除了基本用法外，它还可以设置请求头： xhr.open('POST', 'https://api.example.com/submit', true); 2. setRequestHeader()方法 setRequestHeader() 方法用于设置自定义的HTTP请求头。必须在 open() 之后、 send() 之前调用： xhr.open('POST', 'https://api.example.com/submit', true); // 设置Content-Type为JSON xhr.setRequestHeader('Content-Type', 'application/json'); // 设置自定义头 xhr.setRequestHeader('X-Custom-Header', 'CustomValue'); // 设置认证头（通常不建议直接设置，使用open的user/password参数更安全） xhr.setRequestHeader('Authorization', 'Bearer token123'); 3. send()方法 send() 方法用于发送请求。其参数是要发送到服务器的数据： // 发送GET请求（无请求体） xhr.send(null); // 发送POST请求（字符串数据） xhr.send('name=John&age=30'); // 发送JSON数据 xhr.send(JSON.stringify({ name: 'John', age: 30 })); // 发送FormData对象（用于文件上传） const formData = new FormData(); formData.append('file', fileInput.files[0]); xhr.send(formData); 4. abort()方法 abort() 方法用于取消正在进行的请求： // 发送请求 xhr.send(); // 在某些条件下取消请求 if (someCondition) { xhr.abort(); } 5. getResponseHeader()和getAllResponseHeaders()方法 这两个方法用于获取响应头信息： // 获取单个响应头 const contentType = xhr.getResponseHeader('Content-Type'); // 获取所有响应头 const allHeaders = xhr.getAllResponseHeaders(); console.log(allHeaders); // 输出示例： // cache-control: max-age=3600 // content-type: application/json // date: Mon, 01 Jan 2024 00:00:00 GMT 事件处理与状态监控 1. onreadystatechange事件处理器 最传统的事件处理方式是使用 onreadystatechange 属性，该函数会在 readyState 属性发生变化时被调用： const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { // 请求完成 if (xhr.status === 200) { // 请求成功 console.log('响应数据:', xhr.responseText); } else { console.error('请求失败:', xhr.status, xhr.statusText); } } }; xhr.send(); 2. 现代事件监听器 现代浏览器支持使用 addEventListener 来监听更具体的事件： const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); // 请求开始时触发（在open()之后，send()之前） xhr.onloadstart = function(event) { console.log('请求开始'); }; // 每次接收到响应数据片段时触发（用于进度监控） xhr.onprogress = function(event) { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; console.log(`下载进度: ${percentComplete.toFixed(2)}%`); } }; // 请求完成时触发（无论成功或失败） xhr.onload = function(event) { if (xhr.status === 200) { console.log('请求成功:', xhr.response); } else { console.error('请求失败:', xhr.status, xhr.statusText); } }; // 请求出错时触发（网络错误等） xhr.onerror = function(event) { console.error('网络错误'); }; // 请求被中止时触发 xhr.onabort = function(event) { console.log('请求被中止'); }; // 请求完成时触发（无论成功、失败或中止） xhr.onloadend = function(event) { console.log('请求结束'); }; xhr.send(); 完整的无刷新数据交互示例 示例1：获取并显示用户数据（GET请求） 这是一个完整的示例，展示如何使用XHR获取服务器数据并动态更新页面：

用户数据管理

加载用户数据
清空数据

示例2：提交表单数据（POST请求）
这个示例展示如何使用XHR提交表单数据，包括JSON格式和表单数据格式：

用户注册

姓名:

邮箱:

年龄:

角色:
普通用户管理员访客

提交注册

示例3：文件上传与进度监控
这个示例展示如何使用XHR上传文件并实时显示上传进度：

文件上传演示

开始上传

高级应用与最佳实践
1. 请求超时处理
XMLHttpRequest
支持设置请求超时时间：
const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘https://api.example.com/data’, true);

// 设置超时时间（毫秒）
xhr.timeout = 5000; // 5秒超时

// 超时事件处理器
xhr.ontimeout = function() {
console.error(‘请求超时’);
showMessage(‘请求超时，请稍后重试’, ‘error’);
};

xhr.send();
2. 取消请求的最佳实践
在实际应用中，可能需要在特定条件下取消请求：
let currentXHR = null;

function fetchData() {
// 如果有正在进行的请求，先取消
if (currentXHR && currentXHR.readyState !== 4) {
currentXHR.abort();
}

currentXHR = new XMLHttpRequest();
currentXHR.open(‘GET’, ‘https://api.example.com/data’, true);

currentXHR.onload = function() {
// 处理响应
console.log(‘数据:’, currentXHR.response);
};

currentXHR.send();
}

// 在页面卸载时取消所有请求
window.addEventListener(‘beforeunload’, () => {
if (currentXHR && currentXHR.readyState !== 4) {
currentXHR.abort();
}
});
3. 封装可复用的XHR函数
为了提高代码复用性，可以将XHR操作封装成一个通用函数：
/**
* 通用XHR请求函数
* @param {Object} options – 配置选项
* @param {string} options.method – 请求方法
* @param {string} options.url – 请求URL
* @param {Object|FormData|string} options.data – 发送的数据
* @param {string} options.responseType – 响应类型
* @param {number} options.timeout – 超时时间
* @param {Function} options.onSuccess – 成功回调
* @param {Function} options.onError – 错误回调
* @param {Function} options.onProgress – 进度回调（上传）
*/
function request(options) {
const defaults = {
method: ‘GET’,
url: ”,
data: null,
responseType: ‘json’,
timeout: 10000,
onSuccess: () => {},
onError: () => {},
onProgress: null
};

const config = { …defaults, …options };

const xhr = new XMLHttpRequest();
xhr.open(config.method, config.url, true);
xhr.responseType = config.responseType;
xhr.timeout = config.timeout;

// 设置请求头（如果是JSON数据）
if (config.data && typeof config.data === ‘object’ && !(config.data instanceof FormData)) {
xhr.setRequestHeader(‘Content-Type’, ‘application/json’);
}

// 事件处理器
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) { config.onSuccess(xhr.response); } else { config.onError({ status: xhr.status, statusText: xhr.statusText, message: `HTTP ${xhr.status}: ${xhr.statusText}` }); } }; xhr.onerror = function() { config.onError({ status: 0, statusText: 'Network Error', message: '网络错误，请检查连接' }); }; xhr.ontimeout = function() { config.onError({ status: 408, statusText: 'Request Timeout', message: '请求超时' }); }; // 上传进度（如果提供） if (config.onProgress && xhr.upload) { xhr.upload.onprogress = config.onProgress; } // 发送数据 if (config.data) { if (typeof config.data === 'object' && !(config.data instanceof FormData)) { xhr.send(JSON.stringify(config.data)); } else { xhr.send(config.data); } } else { xhr.send(); } return xhr; } // 使用示例 // GET请求 request({ method: 'GET', url: 'https://api.example.com/users', onSuccess: (data) => console.log(‘用户列表:’, data),
onError: (error) => console.error(‘错误:’, error.message)
});

// POST请求
request({
method: ‘POST’,
url: ‘https://api.example.com/users’,
data: { name: ‘John’, email: ‘john@example.com’ },
onSuccess: (data) => console.log(‘创建成功:’, data),
onError: (error) => console.error(‘错误:’, error.message)
});

// 文件上传
const formData = new FormData();
formData.append(‘file’, fileInput.files[0]);
request({
method: ‘POST’,
url: ‘https://api.example.com/upload’,
data: formData,
onProgress: (event) => {
if (event.lengthComputable) {
const percent = (event.loaded / event.total * 100).toFixed(1);
console.log(`上传进度: ${percent}%`);
}
},
onSuccess: (data) => console.log(‘上传成功:’, data),
onError: (error) => console.error(‘错误:’, error.message)
});
4. 跨域请求与CORS
跨域请求是现代Web开发中的常见需求。
XMLHttpRequest
支持跨域请求，但需要服务器配合：
// 跨域请求示例
const xhr = new XMLHttpRequest();
xhr.open(‘GET’, ‘https://api.otherdomain.com/data’, true);

// 包含凭据（cookies、HTTP认证）
xhr.withCredentials = true;

// 设置自定义请求头（需要服务器允许）
xhr.setRequestHeader(‘X-Custom-Header’, ‘value’);

xhr.onload = function() {
if (xhr.status === 200) {
console.log(‘跨域数据:’, xhr.response);
}
};

xhr.send();
服务器端CORS配置示例（Node.js/Express）：
const express = require(‘express’);
const app = express();

// 允许所有来源的跨域请求
app.use((req, res, next) => {
res.header(‘Access-Control-Allow-Origin’, ‘*’); // 生产环境应指定具体域名
res.header(‘Access-Control-Allow-Methods’, ‘GET, POST, PUT, DELETE, OPTIONS’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type, Authorization, X-Custom-Header’);
res.header(‘Access-Control-Allow-Credentials’, ‘true’);

// 处理预检请求
if (req.method === ‘OPTIONS’) {
return res.sendStatus(200);
}
next();
});

app.get(‘/api/data’, (req, res) => {
res.json({ message: ‘跨域数据获取成功’ });
});

app.listen(3000);
5. 请求队列与并发控制
在实际应用中，可能需要控制并发请求数量：
class RequestQueue {
constructor(maxConcurrent = 3) {
this.maxConcurrent = maxConcurrent;
this.queue = [];
this.active = 0;
}

add(requestConfig) {
return new Promise((resolve, reject) => {
this.queue.push({ requestConfig, resolve, reject });
this.process();
});
}

process() {
while (this.active < this.maxConcurrent && this.queue.length > 0) {
const { requestConfig, resolve, reject } = this.queue.shift();
this.active++;

request({
…requestConfig,
onSuccess: (data) => {
resolve(data);
this.active–;
this.process();
},
onError: (error) => {
reject(error);
this.active–;
this.process();
}
});
}
}
}

// 使用示例
const queue = new RequestQueue(2); // 最多同时2个请求

// 添加多个请求
queue.add({ method: ‘GET’, url: ‘https://api.example.com/data1’ })
.then(data => console.log(‘请求1完成:’, data));

queue.add({ method: ‘GET’, url: ‘https://api.example.com/data2’ })
.then(data => console.log(‘请求2完成:’, data));

queue.add({ method: ‘GET’, url: ‘https://api.example.com/data3’ })
.then(data => console.log(‘请求3完成:’, data));
XMLHttpRequest的局限性与现代替代方案
局限性
尽管
XMLHttpRequest
功能强大，但它也有一些局限性：
API设计复杂
：基于事件的回调方式容易导致”回调地狱”
不支持Promise
：原生不支持现代Promise和async/await语法
语法冗长
：相比现代API，代码量较大
不支持流式处理
：处理大文件或实时数据流不够优雅
现代替代方案：Fetch API
现代浏览器提供了更简洁的
fetch
API：
// 使用fetch的等效代码
fetch(‘https://api.example.com/data’, {
method: ‘GET’,
headers: {
‘Content-Type’: ‘application/json’
},
credentials: ‘include’
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
return response.json();
})
.then(data => {
console.log(‘数据:’, data);
})
.catch(error => {
console.error(‘错误:’, error);
});

// 使用async/await
async function fetchData() {
try {
const response = await fetch(‘https://api.example.com/data’);
const data = await response.json();
console.log(‘数据:’, data);
} catch (error) {
console.error(‘错误:’, error);
}
}
为什么还要学习XMLHttpRequest？
尽管有现代替代方案，学习
XMLHttpRequest
仍然有价值：
理解底层原理
：了解AJAX技术的基础
兼容性
：支持非常旧的浏览器（如IE9及以下）
特定功能
：进度事件、上传进度等在某些场景下仍需XHR
维护旧代码
：许多遗留系统仍在使用XHR
总结
XMLHttpRequest
作为AJAX技术的核心，为现代Web应用奠定了基础。通过本文的详细讲解和完整示例，您应该已经掌握了：
创建和配置XHR对象
：包括请求方法、URL、异步模式等
核心属性和方法
：readyState、status、send()、setRequestHeader()等
事件处理
：onreadystatechange、onload、onerror、onprogress等
实际应用场景
：数据获取、表单提交、文件上传、进度监控
高级技巧
：超时处理、请求取消、封装复用、跨域请求
最佳实践
：错误处理、并发控制、性能优化
虽然现代开发中更多使用
fetch
API和各种封装库，但深入理解
XMLHttpRequest
的工作原理对于掌握Web通信机制、调试问题以及处理特殊情况仍然至关重要。它是Web开发技术演进的重要一环，也是每个前端开发者应该掌握的基础知识。
在实际项目中，建议根据目标浏览器的支持情况和项目需求，选择合适的API：对于现代项目优先使用
fetch
，对于需要兼容旧浏览器或特定功能（如上传进度）的场景，
XMLHttpRequest
仍然是可靠的选择。