XMLHTTPRequest入门：轻松掌握基础请求-原创手记-慕课网

概述

本文介绍了XMLHTTPRequest入门的相关知识，包括其基本概念、用途和创建方法。通过示例代码展示了如何使用XMLHTTPRequest对象发送GET和POST请求，并处理响应。文章还提供了实际应用示例，帮助读者理解如何在实际开发中应用XMLHTTPRequest入门知识。

XMLHTTPRequest简介

什么是XMLHTTPRequest

XMLHTTPRequest（简称XMLHttpRequest）是一种浏览器内置的对象，它允许网页使用客户端脚本与服务器进行交互，而无需重新加载整个页面。XMLHTTPRequest对象的主要用途是发起HTTP请求（如GET、POST等）并接收来自服务器的响应。这种机制是AJAX（Asynchronous JavaScript and XML）的核心，使得网页能够实现动态更新，而无需刷新页面。

为什么需要使用XMLHTTPRequest

XMLHTTPRequest提供了异步通信的能力，使得客户端可以异步地向服务器发送请求并接收响应，而不阻塞用户界面。这种非阻塞式方法不仅提高了用户体验，还可以优化网页性能。例如，当用户提交一个表单时，传统的HTTP提交方式会导致整个页面重新加载，而使用XMLHTTPRequest则可以在后台异步地提交表单数据，并在用户界面中处理响应，从而避免页面卡顿，提升网站的响应速度。

创建XMLHTTPRequest对象

创建对象的步骤

在JavaScript中，创建XMLHTTPRequest对象是一个简单的过程。根据浏览器的不同，创建对象的方法可能会略有不同。以下是一些常见的创建方法：

标准的方法：
```
var xhr = new XMLHttpRequest();
```
这是现代浏览器中通用的方法。
针对某些旧版本IE浏览器的方法：
```
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
```
旧版本的IE浏览器可能需要使用ActiveXObject。

下面是一个完整的示例，展示如何根据不同的浏览器创建XMLHTTPRequest对象：

var xhr = null;
if (window.XMLHttpRequest) { // 所有现代浏览器
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // 旧版IE浏览器
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
``

创建XMLHTTPRequest对象的具体步骤如下：

1. 使用`new XMLHttpRequest()`创建一个新的XMLHTTPRequest对象实例。
2. 使用`open()`方法设置请求类型（如GET或POST）、URL和是否异步。
3. 使用`send()`方法发送请求。

### 示例代码
下面是一个创建XMLHTTPRequest对象并发起GET请求的示例代码：

```javascript
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.send();

上述代码中，open()方法设置请求为GET类型，URL为https://example.com/api/data，并指定请求为异步（第三个参数为true）。send()方法不带有任何参数，适用于GET请求。

发送GET请求

GET请求的原理

GET请求是一种HTTP请求方法，用于从服务器请求数据。GET方法通过URL参数传递数据，这种方式使得数据可以被直接看到，但是不安全，因为数据会显示在浏览器的地址栏中。GET请求通常用于获取数据，而不修改服务器上的资源。

发送GET请求的代码示例

发送GET请求的基本步骤如下：

创建XMLHTTPRequest对象。
设置请求方法、URL和异步标志。
发送请求。
当请求完成时，通过onreadystatechange事件处理程序处理响应。

下面是一个具体的代码示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

在这个示例中，当readyState属性变为4且status属性为200时，表示请求成功完成并且响应已准备好，此时可以处理响应内容，如将响应数据打印到控制台。

发送POST请求

POST请求的特点

POST请求也是一种HTTP请求方法，用于从客户端向服务器发送数据。与GET不同，POST请求通过请求体发送数据，数据不会显示在URL中，从而提高了数据的安全性和隐私性。POST请求通常用于提交表单数据，创建新资源或更新数据库中的数据。

发送POST请求的代码示例

发送POST请求的基本步骤类似，但是需要将数据作为请求体发送。下面是一个具体的代码示例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send("param1=value1&param2=value2");

在此示例中，setRequestHeader()方法设置请求头，用于指定请求体的数据格式。这里使用了application/x-www-form-urlencoded格式，适用于大多数表单数据提交。在send()方法中，传递了一个字符串，该字符串将作为请求体发送到服务器。

处理请求响应

响应状态检查

处理XMLHTTPRequest对象的响应时，需要检查响应的状态码以确定请求是否成功。状态码200表示请求成功，而任何其他状态码则表示请求失败。此外，还需要检查readyState属性，确保响应已经完全加载。

获取响应数据

一旦请求完成并且响应已经加载，可以通过responseText或responseXML属性获取响应数据。responseText返回字符串形式的响应数据，适用于JSON等文本格式；responseXML则返回XML文档对象，适用于XML格式的数据。

下面是一个完整的响应处理示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("Response received:", xhr.responseText);
    } else if (xhr.readyState === 4) {
        console.error("Request failed. Status:", xhr.status);
    }
};
xhr.send();

在这个示例中，当readyState属性变为4时，检查xhr.status属性来确定请求是否成功。如果响应成功，则通过responseText属性获取并打印响应数据。如果请求失败，则打印错误信息和状态码。

实际应用示例

使用XMLHTTPRequest进行简单的数据交互

下面是一个使用XMLHTTPRequest进行简单数据交互的完整示例。在这个示例中，用户可以输入一些数据，然后提交表单，服务器会处理这些数据并返回一个响应。

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>XMLHTTPRequest Example</title>
</head>
<body>
    <form id="myForm">
        <label for="dataInput">Enter some data:</label>
        <input type="text" id="dataInput" />
        <button type="submit">Submit</button>
    </form>
    <div id="response"></div>
    <script src="xhr.js"></script>
</body>
</html>

JavaScript代码（xhr.js）

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var dataInput = document.getElementById("dataInput").value;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "https://example.com/api/data", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("response").innerHTML = xhr.responseText;
        } else if (xhr.readyState === 4) {
            document.getElementById("response").innerHTML = "Request failed.";
        }
    };
    xhr.send("data=" + encodeURIComponent(dataInput));
});

在这个示例中，当用户提交表单时，阻止表单的默认提交行为，并创建一个XMLHTTPRequest对象以发送POST请求。请求体中包含了用户输入的数据，并在服务器返回响应后更新页面上的内容。这个示例展示了如何在实际应用中使用XMLHTTPRequest来实现客户端与服务器之间的数据交互。