JS XHR详解|极客笔记

JS XHR详解

在Web开发中，XHR（XMLHttpRequest）是一个重要的技术，它允许浏览器与服务器之间进行异步通信。在本文中，我们将详细介绍XHR的用法和原理，让大家对这个技术有更深入的了解。

什么是XHR

XMLHttpRequest是一个内置的浏览器对象，允许客户端JavaScript与服务器进行交互，发送HTTP请求并接收服务器返回的数据，从而实现异步通信。XHR在Ajax（Asynchronous JavaScript and XML）中扮演着重要的角色，使得网页能够在不刷新的情况下更新部分内容。

XHR的基本用法

使用XHR对象进行网络请求的基本步骤如下：

创建一个XHR对象
打开一个连接
发送请求
监听请求状态改变
处理服务器返回的数据

下面是一个简单的示例代码，演示如何使用XHR对象发送一个GET请求：

// 创建一个XHR对象
let xhr = new XMLHttpRequest();

// 打开一个连接
xhr.open('GET', '/api/data', true);

// 发送请求
xhr.send();

// 监听请求状态改变
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理服务器返回的数据
        console.log(xhr.responseText);
    }
};

在上面的示例中，我们首先创建了一个XHR对象，然后使用open方法打开了一个GET请求的连接，并发送了请求。接着，我们监听了onreadystatechange事件，当请求状态改变时，通过xhr.readyState和xhr.status的值来判断是否请求成功，并处理服务器返回的数据。

XHR对象的属性和方法

XHR对象拥有一系列的属性和方法，以下是一些常用的属性和方法：

onreadystatechange：请求状态改变时执行的事件处理程序
readyState：请求的当前状态，有0-4五种状态，代表着请求的不同阶段
status：HTTP状态码，用于判断请求是否成功
responseText：服务器返回的响应数据，为字符串形式
responseXML：服务器返回的响应数据，为XML文档形式
open(method, url, async)：初始化一个请求
send(data)：发送请求
setRequestHeader(header, value)：设置请求头

发送GET请求

发送一个GET请求是XHR中最常见的用法之一，通过GET请求我们可以从服务器获取数据。以下是一个简单的示例代码，展示了如何发送GET请求并处理服务器返回的数据：

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.send();

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

在这个示例中，我们创建了一个XHR对象，并使用open方法打开了一个GET请求的连接，然后发送请求并监听请求状态的改变。当请求完成并返回状态码为200时，我们打印出服务器返回的响应数据。

发送POST请求

除了GET请求，我们还可以使用XHR对象发送POST请求，用于向服务器提交数据。以下是一个简单的示例代码，展示了如何发送POST请求并处理服务器返回的数据：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({name: 'John', age: 30}));

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

在这个示例中，我们创建了一个XHR对象，并使用open方法打开了一个POST请求的连接，然后设置了请求头并发送请求，并将数据以JSON字符串的形式发送到服务器。监听请求状态的改变，当请求完成并返回状态码为200时，打印出服务器返回的响应数据。