XMLHttpRequest API 交互式指南

November 25, 2024 0 By

有时，您不想使用框架或库来开发网站。相反您依赖于普通的旧式 HTML、CSS 和 Vanilla JavaScript。它们都能很好地工作，但也有一些局限性。其一是刷新页面以显示更新的数据。

幸运的是，有一种 Web API 可以帮助您从 API 中获取数据，然后在不刷新页面的情况下将其显示给用户。这就是 XMLHttpRequest API，在本篇中，我们将介绍它以及如何在网站上使用它。

XMLHttp请求API

如前所述，这是一个 Web API，可让您通过 REST API 端点与服务器通信，获取数据，然后在不刷新页面的情况下将数据显示给用户。您还可以通过该 API 在后台向服务器发送数据。

尽管名为 XMLHttpRequest API，但它并不局限于 XML 数据。您还可以通过此 API 请求 JSON 数据。

该 API 有多种属性和方法。下面我们就来讨论其中的几个：

readyState就绪状态

它是 XMLHttpRequest API 的一个属性，可让您了解请求的状态。状态可以是 UNSENT、OPENED、HEADERS RECEIVED、LOADING 和 DONE。

status地位

该属性返回一个无符号短字符，表示对请求的响应状态。

Open打开

这是 API 提供的一种方法，用于初始化 HTTP 请求。它需要五个参数，其中三个是可选参数。第一个必要参数是 HTTP 方法，第二个是 API 端点。

abort终止

如果 HTTP 请求已经发送，此 API 方法会终止所有 HTTP 请求。

用法

步骤1：

您需要创建一个项目。为此，请在计算机上创建一个文件夹，并在首选的代码编辑器中打开它。

步骤2：

完成后，在项目目录中创建一个名为 index.html 的文件，并在其中添加基本的 HTML 模板代码。如果你想快速复制粘贴，我在下面也提供了代码。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>XMLHttpRequest API</title> </head> <body> <script></script> </body> </html>

步骤3：

现在让我们看看如何发出请求。首先，您需要初始化 XMLHttpRequest API 实例。具体操作如下

const xhr = new XMLHttpRequest();

现在，我们需要调用上面讨论过的打开方法。

xhr.open(method, url);

我们需要将响应类型更改为 JSON，让 API 知道我们需要 JSON 格式的数据：

xhr.responseType = 'json';

最后，我们需要发送请求。方法如下：

xhr.send();

您还需要处理 API 调用时收到的响应。为此，您需要在 XMLHttpRequest 实例上设置 onload 事件监听器。

xhr.onload = () => { console.log(xhr.response); };

您也可以将整个 XMLHttpRequest 代码封装在一个承诺中，然后等待它，使其成为异步代码。为了更好地理解，我还创建了一个快速演示。

const sendRequest = (method, url) => {


	const promise = new Promise((resolve, reject) => {
	const xhr = new XMLHttpRequest();
	xhr.open(method, url);

	xhr.responseType = 'json';

	xhr.onload = () => {
		if (xhr.status >= 400) {
			reject(xhr.response);
		}
		resolve(xhr.response);
	};

		xhr.send();
	});
	return promise;
};

const getData = async () => {
	try {
		const res = await sendRequest('GET', 'https://rapidapi.com/guides/api/rest');
		console.log(res);
	} catch (err) {
		console.log(err);
	}
};

getData();

提交后：

{


    "data": [
        {
            "id": 1,
            "email": "[email protected]",
            "first_name": "John",
            "last_name": "Doe"
        },
        {
            "id": 2,
            "email": "[email protected]",
            "first_name": "Richard",
            "last_name": "Doe"
        },
        {
            "id": 3,
            "email": "[email protected]",
            "first_name": "Jane",
            "last_name": "Doe"
        }
    ]

}

支持

XMLHttpRequest API 支持所有现代网络浏览器，包括 Chrome、Firefox、Edge、Opera 和 Safari。

原文链接：Interactive Guide to XMLHttpRequest API

Keyword: gemini api 收费

CategoryNews