JS中XMLHttpRequest的作用及使用场景

XMLHttpRequest (XHR) 作为 JavaScript 中实现异步通信的元老级 API，至今仍扮演着重要角色。它允许网页在不刷新的情况下与服务器交换数据，构建动态用户体验。本文深入探讨 XHR 的作用与使用场景，从新闻列表加载到文件上传，揭示其在 AJAX 应用中的基石地位。通过实例代码，详细讲解了如何配置 XHR 实例、监听请求状态、处理服务器响应，包括 GET 和 POST 请求的实现。同时，文章剖析了使用 XHR 时常见的陷阱，如跨域 CORS 问题、回调地狱、错误处理不当以及同步请求的危害，并强调了防范 XSS 攻击的重要性，旨在帮助开发者更好地理解和运用 XHR，即使在 Fetch API 和 Axios 盛行的今天，也能掌握这一基础技术，为更深入的网络请求理解和问题解决奠定基础。

XMLHttpRequest（XHR）是实现网页异步通信的基础API，用于在不刷新页面的情况下与服务器交换数据；2. 它通过readyState五个状态（0-4）管理请求生命周期，并支持onreadystatechange、onerror等事件精细控制流程；3. 常见陷阱包括跨域CORS需服务器配置、回调地狱导致代码难维护、错误处理需区分HTTP状态码与网络错误、禁止使用同步请求避免页面卡死、接收数据须防XSS攻击。

XMLHttpRequest，简称XHR，在JavaScript里就是那个老牌的幕后工作者，它让网页能在不刷新整个页面的情况下，悄悄地从服务器获取或发送数据。说白了，就是实现异步通信的关键，尤其在AJAX（Asynchronous JavaScript and XML）盛行的年代，它简直是基石，让前端应用有了“活”起来的感觉，不再是那种点一下链接就整个页面白屏再加载的体验了。它的主要作用就是发起HTTP请求，接收服务器响应，从而在客户端和服务端之间建立起一座数据传输的桥梁。至于使用场景，那可太多了，比如加载新闻列表、提交表单不跳转、实时聊天、数据筛选、甚至是一些简单的文件上传下载，它都曾是核心。

XMLHttpRequest的用法其实并不复杂，但你需要对它的异步特性有点耐心。通常，你会创建一个XHR实例，然后配置它，比如指定请求方法（GET、POST等）、URL，接着设置好监听器来处理不同阶段的响应，最后发送请求。

// 这是一个基本的GET请求示例，用来获取一些JSON数据
function fetchData(url, callback) {
    const xhr = new XMLHttpRequest();

    // 配置请求：GET方法，目标URL，true表示异步
    xhr.open('GET', url, true);

    // 设置响应类型为JSON，这样XHR会自动解析响应体
    xhr.responseType = 'json'; 

    // 监听请求状态变化
    xhr.onreadystatechange = function() {
        // readyState等于4表示请求已完成且响应已就绪
        if (xhr.readyState === 4) {
            // status等于200表示HTTP请求成功
            if (xhr.status === 200) {
                // 请求成功，将解析后的数据传给回调函数
                callback(null, xhr.response);
            } else {
                // 请求失败，将错误信息传给回调函数
                callback(new Error(`请求失败，状态码: ${xhr.status}`));
            }
        }
    };

    // 监听网络错误
    xhr.onerror = function() {
        callback(new Error('网络错误或请求被阻止'));
    };

    // 发送请求
    xhr.send();
}

// 示例调用：
// fetchData('https://api.example.com/data', (error, data) => {
//     if (error) {
//         console.error('获取数据失败:', error);
//     } else {
//         console.log('获取数据成功:', data);
//     }
// });

// 如果是POST请求，通常需要设置请求头并发送数据
function postData(url, data, callback) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    // 设置请求头，告诉服务器我们发送的是JSON数据
    xhr.setRequestHeader('Content-Type', 'application/json');

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 201) { // 201 Created 也是成功
                callback(null, JSON.parse(xhr.responseText));
            } else {
                callback(new Error(`提交失败，状态码: ${xhr.status}`));
            }
        }
    };

    xhr.onerror = function() {
        callback(new Error('网络错误或请求被阻止'));
    };

    // 发送JSON字符串
    xhr.send(JSON.stringify(data));
}

// 示例调用：
// postData('https://api.example.com/submit', { name: '张三', age: 30 }, (error, response) => {
//     if (error) {
//         console.error('提交数据失败:', error);
//     } else {
//         console.log('提交数据成功:', response);
//     }
// });

为什么在Fetch API和Axios盛行的今天，我们还需要了解XMLHttpRequest？

说实话，现在大部分新的前端项目里，你可能已经很少直接看到XMLHttpRequest的身影了。大家更喜欢用Fetch API，因为它基于Promise，写起来更现代、更链式，处理异步回调的“地狱”问题也轻松很多。或者用Axios这种第三方库，它封装得更完善，错误处理、拦截器什么的都给你考虑到了。那为什么还要提XHR呢？我觉得有几个原因。首先，它是所有现代异步HTTP请求的“祖师爷”。理解XHR的工作原理，能帮你更好地理解Fetch和Axios这些上层API到底在底层做了些什么，它们很多概念都是从XHR这里继承或演变过来的。比如HTTP状态码、请求头、请求体、响应体这些基本概念，都是通用的。其次，在一些老旧的项目或者需要兼容非常老的浏览器环境时，XHR可能还是你唯一的选择。你总不能指望所有用户都用上最新的浏览器吧？虽然这情况越来越少，但真遇到时，你会庆幸自己懂它。最后，它能让你对网络请求的底层机制有更深的认识，这对于调试、性能优化，甚至理解一些网络安全问题（比如CORS）都非常有帮助。这种基础知识，就像学武术先扎马步一样，总归是没错的。

XMLHttpRequest处理请求和响应的生命周期是怎样的？

XHR的生命周期，其实就是它从创建到请求完成，期间状态不断变化的过程。这主要通过readyState属性来体现，它有五个值：

• 0 (UNSENT)：这是XHR对象刚被创建出来，或者open()方法还没被调用的初始状态。它就像一个还没被分配任务的工人，啥也没干呢。
• 1 (OPENED)：当你调用了xhr.open()方法之后，XHR就进入了这个状态。这时候，请求的基本配置（请求方法、URL、是否异步）已经设置好了，但还没发送。工人接到任务了，但还没开始干活。
• 2 (HEADERS_RECEIVED)：xhr.send()方法被调用后，如果服务器已经接收到请求并返回了响应头，XHR就会进入这个状态。你可以通过getAllResponseHeaders()或getResponseHeader()方法获取到响应头信息。工人开始干活了，并且收到了一些初步反馈。
• 3 (LOADING)：这个状态表示响应体正在被接收。服务器可能还在陆陆续续地发送数据，这时候responseText属性会包含已经接收到的部分数据。对于大型文件下载或者流式响应，这个状态会持续一段时间。工人正在持续接收数据。
• 4 (DONE)：请求已经完成，并且响应数据已经完全接收。无论请求成功（比如HTTP状态码200）还是失败（比如404、500），只要数据传输过程结束，XHR都会达到这个状态。这是最终状态，工人任务完成了。

除了onreadystatechange，XHR还有一些其他的事件监听器可以让你更细致地控制和观察请求过程：

• onload: 请求成功完成时触发，无论HTTP状态码是多少，只要readyState达到4就触发。通常我们会在这个事件里检查xhr.status。
• onerror: 请求遇到网络错误（比如断网、DNS解析失败）时触发。
• onprogress: 在LOADING状态下，当浏览器接收到更多数据时周期性触发。可以用来实现进度条。
• ontimeout: 请求超时时触发。

理解这些状态和事件，能让你更精准地处理各种网络请求场景，比如显示加载动画、处理网络中断、或者在文件上传时显示进度。

使用XMLHttpRequest时，有哪些常见的陷阱或需要注意的问题？

尽管XHR是基础，但用起来还是有些地方容易踩坑或者需要特别注意。

一个非常常见的坑是跨域请求（CORS）问题。如果你尝试从一个域名（比如a.com）下的网页去请求另一个域名（比如b.com）下的资源，浏览器出于安全考虑会默认阻止这个请求。这时候，你会在控制台看到类似“No 'Access-Control-Allow-Origin' header is present...”的错误。解决这个问题，通常需要在服务器端进行配置，允许你的前端域名访问。这不是前端代码能直接解决的，但作为前端开发者，你需要知道这个问题的根源在服务器。

其次，就是回调地狱（Callback Hell）。由于XHR是异步的，你处理响应通常需要嵌套回调函数。当你的业务逻辑变得复杂，需要连续发起多个请求，并且下一个请求依赖上一个请求的结果时，代码就会变得一层套一层，难以阅读和维护。虽然Fetch API和Promise就是为了解决这个问题而生的，但在XHR时代，很多人会自己封装Promise或者使用第三方库来避免这种嵌套。

错误处理也是一个容易被忽视的地方。很多人只关心xhr.status === 200的情况，但实际上，HTTP请求的失败不仅仅是网络错误，还包括各种非200的状态码（400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 500 Internal Server Error等等）。你需要根据业务逻辑，对这些不同的状态码进行区分处理。此外，onerror事件也很重要，它捕获的是真正的网络层面的错误，而不是服务器返回的错误状态码。

还有一点，关于同步请求。xhr.open()方法第三个参数如果设置为false，就是同步请求。这意味着在请求完成之前，JavaScript代码会阻塞，整个页面会卡住，用户体验极差。在现代Web开发中，几乎所有情况下都应该避免使用同步XHR，因为它会冻结浏览器UI，甚至可能导致浏览器崩溃。

最后，就是安全问题。虽然XHR本身不直接引发安全漏洞，但通过XHR发送数据时，需要注意敏感信息的处理，比如不要直接在URL中暴露敏感参数。另外，对于从服务器接收到的数据，尤其是JSON或XML，一定要进行严格的验证和净化，以防止XSS（跨站脚本攻击）等注入风险。你永远不能完全信任来自服务器的数据，即使是你自己的服务器。

好了，本文到此结束，带大家了解了《JS中XMLHttpRequest的作用及使用场景》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！