DOM XMLHttpRequest 学习笔记

1. 什么是 XMLHttpRequest？

XMLHttpRequest 是一个 JavaScript 对象，它可以用于在不重新加载页面的情况下向服务器请求数据、接收数据并更新部分网页。常用于进行 AJAX 操作。

2. XMLHttpRequest 的基本用法

2.1 创建 XMLHttpRequest 对象

javascriptCopy Code
const xhr = new XMLHttpRequest();

2.2 设置请求参数

javascriptCopy Code
xhr.open(method, url, async);

参数：

method：请求方法，例如 GET、POST 等。
url：请求的 URL。
async：是否异步发送请求，一般设置为 true。

2.3 发送请求

javascriptCopy Code
xhr.send([body]);

参数：

body：发送的请求数据。如果是 GET 请求，可以不传这个参数。

2.4 监听事件

javascriptCopy Code
xhr.addEventListener(event, callback);

常用的事件有：

load：当请求完成（不管成功或失败）时触发。
error：当请求失败时触发。
abort：当请求被中止时触发。

2.5 获取响应数据

javascriptCopy Code
xhr.responseText

响应的数据保存在 xhr.responseText 中。如果需要获取 JSON 格式的响应数据，则可以使用 xhr.response。

3. 实例

以下是一个简单的实例，用于向服务器请求一个文本文件，并把返回的内容显示在网页上。

htmlCopy Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest Example</title>
</head>
<body>
    <div id="result"></div>
    <script>
        const xhr = new XMLHttpRequest();

        xhr.open('GET', 'example.txt', true);

        xhr.addEventListener('load', () => {
            if (xhr.status === 200) {
                document.getElementById('result').innerHTML = xhr.responseText;
            } else {
                console.error('Failed to load');
            }
        });

        xhr.send();
    </script>
</body>
</html>

在这个例子中，我们首先创建了一个 XMLHttpRequest 对象，并设置它的请求 URL。接着，我们监听了请求的 load 事件。当请求成功完成后，我们会检查响应的状态码。如果状态码为 200，则表示请求成功，并将响应的内容显示在网页上。否则，就会打印出错误信息。最后，我们发送了请求。

以上就是 DOM XMLHttpRequest 的基本用法和一个简单的实例。希望对你有所帮助！