原生 AJAX 揭秘：如何使用 XHR 发起请求

原生 AJAX 揭秘如何使用 XHR 发起请求 什么是 XHRXMLHttpRequest是浏览器提供的一个内置对象允许我们在后台与服务器交换数据。这意味着我们可以在不重新加载整个页面的情况下更新网页的一部分。这就是著名的AJAX(Asynchronous JavaScript and XML) 技术的核心。通俗比喻如果把浏览器比作一家餐厅传统页面刷新你点完菜必须离开餐厅等厨房做好后再重新进门坐下吃整个页面重载。XHR (AJAX)你坐在座位上派服务员XHR 对象去厨房催菜或加菜。菜做好了服务员直接端到你桌上局部更新你不需要离开座位。 目录️ 发起请求的标准五步法 代码实战GET 与 POST 核心概念readyState状态详解⚠️ 常见陷阱与最佳实践 XHR vs Fetch该选哪个 总结1. ️ 发起请求的标准五步法使用 XHR 发起一个请求通常遵循以下五个标准步骤。你可以把它当作一个模板来记忆。第一步创建对象constxhrnewXMLHttpRequest();第二步配置请求使用open()方法初始化请求。// open(method, url, async)xhr.open(GET,https://api.example.com/data,true);method: 请求类型 (GET,POST,PUT等)。url: 请求地址。async: 是否异步默认为true强烈建议保持异步否则会阻塞页面。第三步设置回调监听状态变化在发送之前先告诉 XHR“当状态改变时该做什么”。xhr.onreadystatechangefunction(){// 处理逻辑写在这里};第四步发送请求xhr.send();// GET 请求通常传 null 或不传// xhr.send(data); // POST 请求传入数据第五步处理响应在回调函数中检查状态码并获取数据。2. 代码实战GET 与 POST场景一发起 GET 请求constxhrnewXMLHttpRequest();// 1. 配置xhr.open(GET,https://jsonplaceholder.typicode.com/todos/1,true);// 2. 监听状态xhr.onreadystatechangefunction(){// readyState 4 表示请求完成// status 200 表示 HTTP 成功if(xhr.readyState4xhr.status200){console.log(请求成功);console.log(JSON.parse(xhr.responseText));// 解析 JSON 数据}elseif(xhr.readyState4){console.error(请求失败状态码,xhr.status);}};// 3. 发送xhr.send();场景二发起 POST 请求提交表单数据POST 请求通常需要设置请求头并发送数据体。constxhrnewXMLHttpRequest();// 1. 配置xhr.open(POST,https://jsonplaceholder.typicode.com/posts,true);// 2. 设置请求头告诉服务器发送的是 JSON 格式xhr.setRequestHeader(Content-Type,application/json;charsetUTF-8);// 3. 监听状态xhr.onreadystatechangefunction(){if(xhr.readyState4xhr.status201){// 201 Createdconsole.log(创建成功);console.log(JSON.parse(xhr.responseText));}};// 4. 发送数据constdataJSON.stringify({title:Foo,body:Bar,userId:1});xhr.send(data);3. 核心概念readyState状态详解xhr.readyState是一个整数表示请求当前的阶段。理解它是处理异步逻辑的关键。值状态常量含义说明0UNSENT未初始化对象已创建但未调用open()1OPENED已打开已调用open()但未调用send()2HEADERS_RECEIVED头已接收已调用send()且已接收到响应头3LOADING加载中响应体正在下载中responseText已有部分数据4DONE完成整个请求过程结束数据接收完毕重点我们最关心的是readyState 4。只有在这个状态下xhr.responseText才是完整可用的。4. ⚠️ 常见陷阱与最佳实践❌ 陷阱 1忘记检查 status只判断readyState 4是不够的。如果服务器返回 404 或 500readyState也是 4但请求实际上是失败的。// ✅ 正确写法if(xhr.readyState4){if(xhr.status200xhr.status300){// 成功处理}else{// 错误处理}}❌ 陷阱 2回调地狱与代码冗余如果有多个请求依赖XHR 的嵌套回调会让代码难以维护Callback Hell。✅ 最佳实践在现代开发中如果必须用原生 JS建议将 XHR封装成 Promise或者直接使用fetch。// 封装成 Promise 的简单示例functionrequest(url){returnnewPromise((resolve,reject){constxhrnewXMLHttpRequest();xhr.open(GET,url);xhr.onload(){if(xhr.status200)resolve(JSON.parse(xhr.responseText));elsereject(newError(xhr.statusText));};xhr.onerror()reject(newError(Network Error));xhr.send();});}// 使用 async/await 调用代码更清晰asyncfunctiongetData(){try{constdataawaitrequest(https://api.example.com/data);console.log(data);}catch(error){console.error(error);}}❌ 陷阱 3跨域问题 (CORS)XHR 同样受浏览器的同源策略限制。如果请求跨域接口后端必须配置正确的 CORS 头如Access-Control-Allow-Origin否则前端会报错。5. XHR vs Fetch该选哪个特性XMLHttpRequest(XHR)fetchAPI出现时间古老 (IE5 时代)现代 (ES6)语法风格基于事件回调基于Promise代码简洁度较繁琐简洁优雅错误处理需手动检查 status网络错误才 rejectHTTP 错误需手动检查进度监控✅ 原生支持 (onprogress)❌ 需借助 ReadableStream (较复杂)兼容性✅ 极好 (包括 IE)❌ IE 不支持 (需 polyfill)建议新项目首选fetch或axios。需要上传进度条XHR 依然有优势或者使用axios底层基于 XHR。维护老项目/兼容 IE必须掌握 XHR。 总结步骤关键代码作用1. 创建new XMLHttpRequest()实例化对象2. 配置xhr.open(GET, url)设定方法和地址3. 监听xhr.onreadystatechange绑定状态变化回调4. 发送xhr.send(body)发出请求5. 判断readyState 4 status 200确认成功并处理数据 博主寄语虽然fetch是未来但XHR是过去和现在的桥梁。理解 XHR 的工作原理能让你更深入地理解 HTTP 请求的生命周期、异步编程模型以及浏览器的网络机制。记住口诀新建对象 Open 配监听状态别嫌累。Send 发送等回应四二零零才到位。希望这篇文档能帮你彻底搞懂 XHR 请求如果有疑问欢迎在评论区留言。喜欢这篇文章吗记得点赞、收藏、转发哦❤️