xmlHttpRequest是什么 ajax核心对象xmlHttpRequest入门

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

xmlHttpRequest是什么 ajax核心对象xmlHttpRequest入门

2025-11-14

浏览次数：次

返回列表

XMLHttpRequest 是浏览器提供的用于异步通信的 J*aScript 对象，支持发送 GET、POST 等请求并处理服务器响应。通过创建 XHR 实例，调用 open() 配置请求方式与 URL，设置 onreadystatechange 监听状态变化，在 readyState 为 4 且 status 为 200 时获取 responseText 或 responseXML 数据，最后调用 send() 发送请求。尽管现代开发多使用 fetch 或 axios，但掌握 XHR 有助于深入理解 AJAX 原理和网络请求机制。

xmlhttprequest是什么 ajax核心对象xmlhttprequest入门

XMLHttpRequest 是 J*aScript 中用于与服务器进行异步通信的核心对象，它使得网页可以在不刷新页面的情况下发送请求并处理响应，是实现 AJAX（Asynchronous J*aScript and XML）技术的关键。

什么是 XMLHttpRequest

XMLHttpRequest（简称 XHR）是一个由浏览器提供的 J*aScript 对象，允许你与服务器交换数据。虽然名字中带有 "XML"，但它不仅可以传输 XML 数据，还能处理 JSON、文本、HTML 等多种格式。

通过 XMLHttpRequest，前端可以：

- 向服务器发送 GET、POST、PUT、DELETE 等类型的请求- 接收服务器返回的数据- 在不重新加载页面的前提下更新部分内容

XMLHttpRequest 的基本使用步骤

要使用 XMLHttpRequest 发送一个简单的请求，通常包括以下几个步骤：

1. 创建 XHR 对象

现代浏览器都支持直接通过构造函数创建：

const xhr = new XMLHttpRequest();

2. 配置请求

使用 open() 方法设置请求方式和 URL：

xhr.open('GET', '/api/data', true);

第三个参数表示是否异步（true 表示异步，默认值）。

Reachout.ai

一个AI驱动的视频开发平台，专为忙碌的企业家和销售团队打造

142 查看详情 Reachout.ai

3. 设置回调函数监听响应

onreadystatechange 事件用于监听请求状态变化：

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

其中 readyState 为 4 表示请求完成，status 为 200 表示成功。

4. 发送请求

调用 send() 方法发起请求：

xhr.send();

如果是 POST 请求，可以在 send() 中传入数据：

xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John' }));

常见的请求状态和属性说明

在处理响应时，以下属性非常关键：

- readyState：请求的当前状态
  0: 未初始化
  1: 已建立连接
  2: 已接收头信息
  3: 正在下载响应体
  4: 请求完成- status：HTTP 状态码，如 200、404、500 等- responseText：服务器返回的文本内容- responseXML：如果返回的是 XML，可在此获取（现已少用）- statusText：状态描述，如 "OK" 或 "Not Found"