XMLHttpRequest API 交互式指南

有时，您不想使用框架或库来开发网站。相反您依赖于普通的旧式 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": "john.doe@website.com",



            "first_name": "John",



            "last_name": "Doe"



        },



        {



            "id": 2,



            "email": "richard.doe@website.com",



            "first_name": "Richard",



            "last_name": "Doe"



        },



        {



            "id": 3,



            "email": "jane.doe@website.com",



            "first_name": "Jane",



            "last_name": "Doe"



        }



    ]



}