本文共 1085 字，大约阅读时间需要 3 分钟。

XMLHttpRequest（XHR）是一种用于构建HTTP请求的JavaScript对象（即构造器）。它是AJAX技术的核心，允许在不重新加载页面的情况下与服务器进行交互。本文将详细介绍XMLHttpRequest的使用方法，包括发送请求和处理响应的关键步骤。

在使用XMLHttpRequest对象时，主要分为两大步骤：

###发送请求

步骤1：创建对象创建新的XMLHttpRequest实例，通常使用以下代码：

var xhr = new XMLHttpRequest();

然后，为该实例设置一个回调函数来处理状态改变事件：

xhr.onreadystatechange = callback;

此处的callback函数会在状态改变时被调用。

步骤2：配置请求调用open()方法来定义HTTP请求的类型、目标URL和是否异步：

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

• 第一个参数：指定HTTP方法，默认为GET，其他如POST、HEAD等也可使用。
• 第二个参数：目标URL，需注意路径正确性。
• 第三个参数：布尔值，true表示异步请求（推荐使用）。

步骤3：发送数据调用send()方法发送请求较小的数据体或空字符串：

xhr.send('');

这适用于GET或HEAD请求，不需要发送数据。

###处理响应

XMLHttpRequest对象的readyState属性在响应数据加载时会发生变化，当其值为4时表示已完成请求。此时，可以使用responseText属性查看返回内容。

###状态码处理status属性显示HTTP响应状态码：

• 404：表示资源未找到
• 200：表示请求成功
• 其他状态码需根据具体要求处理

###示例代码下面的代码展示了如何在回调函数中检查并显示响应内容：

function callback() {    if (xhr.readyState < 4) {        return; //等待响应    }    if (xhr.status !== 200) {        alert('状态码错误');        return; //处理错误    }    alert(xhr.responseText);}

###启动服务后的效果在浏览器中运行代码后，会显示一个弹窗，显示从myfile.txt中读取到的内容。

转载地址：http://icloz.baihongyu.com/