XMLHttpRequest 对象|程序员教程

XML HttpRequest 对象

什么是XMLHttpRequest对象？

XMLHttpRequest对象是AJAX技术的核心组件，它使得浏览器能够与服务器进行异步通信。借助XMLHttpRequest对象，开发者可以在不刷新整个页面的情况下，向服务器发送请求并处理响应数据。

创建XMLHttpRequest对象

首先，我们需要创建一个XMLHttpRequest对象。由于浏览器兼容性问题，在早期的IE浏览器（IE6及更早版本）中，需要使用ActiveXObject来实现相似功能。以下代码展示了如何根据浏览器特性创建XMLHttpRequest对象：

                function createXMLHttpRequest() {
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        // 针对现代浏览器，包括IE7+
                        xmlhttp = new XMLHttpRequest();
                    } else {
                        // 针对IE6, IE5
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    return xmlhttp;
                }

                var xhr = createXMLHttpRequest();

配置XMLHttpRequest对象

接下来，我们需要为XMLHttpRequest对象设置请求类型（GET或POST）、目标URL和是否异步进行通信。这些信息通过 open()方法进行配置：

                xhr.open(method, url, async);

参数说明：

method：请求类型，如"GET"或"POST"。
url：请求目标URL。
async：是否异步通信，布尔值。若为true则表示进行异步通信，false表示同步。

示例：

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

发送请求

配置好XMLHttpRequest对象后，可以通过 send()方法发送请求。如果是GET请求，参数为空；如果是POST请求，参数为要提交的数据。

                // GET请求
                xhr.send();

                // POST请求
                xhr.send(data);

监听服务器响应

为了处理服务器返回的数据，我们需要监听XMLHttpRequest对象的 readystatechange事件。当状态发生变化时，会触发此事件。通过检查 readyState属性和 status属性，我们可以判断数据是否已经可以进行处理。

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        // 数据准备就绪，开始处理
                        var responseData = xhr.responseText;
                        console.log(responseData);
                    }
                };

readyState属性值解释：

0：请求未初始化
1：与服务器建立连接
2：请求已接收到响应头部
3：正在下载响应体
4：请求已完成，可以进行处理

status属性为HTTP状态码，如200表示成功，404表示未找到资源等。

发送一个简单的GET请求

以下示例展示了如何创建XMLHttpRequest对象、配置请求信息、发送请求，并处理服务器返回的数据：

                function createXMLHttpRequest() {
                    var xmlhttp;
                    if (window.XMLHttpRequest) {
                        xmlhttp = new XMLHttpRequest();
                    } else {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    return xmlhttp;
                }

                var xhr = createXMLHttpRequest();

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

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseData = xhr.responseText;
                        console.log(responseData);
                    }
                };

                xhr.send();

结束语

本教程介绍了XMLHttpRequest对象的基本用法，包括创建、配置、发送请求以及处理服务器响应等内容。通过掌握这些知识点，您可以在前端开发过程中灵活运用AJAX技术与后端服务进行交互。在实际项目中，还需关注错误处理、超时处理、跨域请求等高级话题。