XMLHttpRequest 对象：传统的网络请求方式

在前端开发的早期阶段，网络数据交互是一个关键的需求。而 XMLHttpRequest 对象就是满足这一需求的传统解决方案，它为我们提供了一种在浏览器和服务器之间进行异步通信的方式。下面我们将深入探讨 XMLHttpRequest 对象的原理、使用方法、相关问题以及优化方案。

原理分析

XMLHttpRequest（XHR）是一种用于在浏览器和服务器之间进行异步数据传输的技术。它允许网页在不刷新整个页面的情况下，与服务器进行交互并更新部分页面内容。其核心原理基于 HTTP 协议，通过浏览器提供的 XMLHttpRequest 对象来创建、发送和处理 HTTP 请求。

下面是 XMLHttpRequest 的工作流程：

创建 XMLHttpRequest 对象 ：使用 new XMLHttpRequest() 来实例化一个 XMLHttpRequest 对象。
打开请求 ：调用 open() 方法，指定请求的方法（如 GET、POST）、请求的 URL、是否异步（通常为 true）。
设置请求头（可选） ：使用 setRequestHeader() 方法设置请求头信息，如请求内容类型等。
发送请求 ：调用 send() 方法发送请求。如果是 POST 请求，可在 send() 方法中传入要发送的数据。
监听状态变化 ：通过监听 onreadystatechange 事件，当 readyState 状态发生变化时，检查 status 状态码和 responseText 或 responseXML 来获取响应数据。

下面是一个简单的流程图来展示这个过程：
是
否
是
否
创建 XMLHttpRequest 对象
打开请求
是否需要设置请求头
设置请求头
发送请求
监听状态变化
状态码是否正常
处理响应数据
处理错误

实操方案

基本的 GET 请求

以下是一个使用 XMLHttpRequest 发送 GET 请求的示例代码：

javascript 复制代码

// 创建 XMLHttpRequest 对象
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.send();

基本的 POST 请求

以下是一个使用 XMLHttpRequest 发送 POST 请求的示例代码：

javascript 复制代码

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

// 打开请求
xhr.open('POST', 'https://api.example.com/submit', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 监听状态变化
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // 请求成功，处理响应数据
            console.log(xhr.responseText);
        } else {
            // 请求失败，处理错误
            console.error('请求失败，状态码：' + xhr.status);
        }
    }
};

// 要发送的数据
const data = {
    name: 'John Doe',
    email: 'johndoe@example.com'
};

// 发送请求
xhr.send(JSON.stringify(data));

处理请求进度

在进行文件上传等大体积数据传输时，我们可能需要监控请求的进度。XMLHttpRequest 提供了 onprogress 事件来实现这一功能。

javascript 复制代码

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload', true);

xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log('上传进度：' + percentComplete + '%');
    }
};

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log('上传成功');
        } else {
            console.error('上传失败，状态码：' + xhr.status);
        }
    }
};

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
xhr.send(file);

避坑要点

跨域问题

由于浏览器的同源策略限制，XMLHttpRequest 请求默认只能访问同源的资源。如果需要访问不同源的资源，会遇到跨域问题。常见的解决方法有 JSONP 和 CORS。

JSONP（JSON with Padding）

JSONP 是一种跨域数据交互的技术，它利用了 <script> 标签的 src 属性不受同源策略限制的特点。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP 示例</title>
</head>

<body>
    <script>
        function handleResponse(data) {
            console.log(data);
        }

        const script = document.createElement('script');
        script.src = 'https://api.example.com/data?callback=handleResponse';
        document.head.appendChild(script);
    </script>
</body>

</html>

CORS（Cross - Origin Resource Sharing）

CORS 是一种现代的跨域解决方案，它需要服务器端进行配置。服务器需要在响应头中添加 Access-Control-Allow-Origin 等相关信息。

javascript 复制代码

// Node.js 示例代码
const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

app.get('/data', (req, res) => {
    res.send({ message: '跨域数据' });
});

app.listen(3000, () => {
    console.log('服务器运行在 3000 端口');
});

错误处理

在使用 XMLHttpRequest 时，需要对各种可能的错误进行处理。除了常见的状态码错误，还可能会遇到网络错误等情况。可以通过监听 onerror 事件来处理网络错误。

javascript 复制代码

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.onerror = function () {
    console.error('网络错误');
};

xhr.send();

兼容性问题

虽然现代浏览器都支持 XMLHttpRequest，但在一些旧版本的浏览器中可能存在兼容性问题。可以使用一些库来进行兼容性处理，如 axios 等，它内部封装了 XMLHttpRequest 并做了很好的兼容性处理。

与现代网络请求技术的对比

随着前端技术的发展，出现了很多新的网络请求技术，如 Fetch API 和 Axios 库。与这些新技术相比，XMLHttpRequest 有其自身的优缺点。

技术	优点	缺点
XMLHttpRequest	兼容性好，在旧浏览器中也能使用	代码复杂，需要手动处理很多细节，如状态码判断、请求头设置等
Fetch API	语法简洁，基于 Promise，使用方便	兼容性稍差，不支持旧浏览器，错误处理机制不够完善
Axios	基于 Promise，功能丰富，支持拦截器、请求取消等功能，对错误处理友好	需要引入额外的库

总之，XMLHttpRequest 作为传统的网络请求方式，在前端开发的历史中起到了重要的作用。虽然现在有了更先进的技术，但了解 XMLHttpRequest 的原理和使用方法对于理解网络请求的本质和解决一些兼容性问题仍然非常有帮助。