所有文章 > API开发 > XMLHttpRequest API 交互式指南
XMLHttpRequest API 交互式指南

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"        }    ]}

支持

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

原文链接:Interactive Guide to XMLHttpRequest API

#你可能也喜欢这些API文章!
搜索、试用、集成国内外API!
幂简集成API平台已有 4030种API!
API大全