html中如何调用接口

在HTML中调用接口，通常需要使用JavaScript来实现，JavaScript是一种客户端脚本语言，可以在浏览器端执行，从而实现与服务器端的交互，在本回答中，我们将详细介绍如何在HTML中使用JavaScript调用接口的方法。

（图片来源网络，侵删）

1、XMLHttpRequest对象

XMLHttpRequest（XHR）对象是JavaScript中用于实现与服务器交互的原生对象，通过XHR对象，我们可以发送HTTP请求，获取服务器返回的数据，并处理这些数据。

以下是一个简单的示例，展示了如何使用XHR对象调用接口：

<!DOCTYPE html> <html> <head> <title>XMLHttpRequest示例</title> </head> <body> <button id="getData">获取数据</button> <div id="result"></div> <script> document.getElementById(getData).addEventListener(click, function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById(result).innerHTML = xhr.responseText; } }; xhr.open(GET, https://api.example.com/data, true); xhr.send(); }); </script> </body> </html>

在这个示例中，我们创建了一个按钮，当点击该按钮时，会触发一个事件监听器，事件监听器中，我们创建了一个XHR对象，并设置了onreadystatechange事件处理函数，当XHR对象的readyState属性变为4（表示请求已完成），并且status属性为200（表示请求成功）时，我们将服务器返回的数据显示在页面上。

2、Fetch API

Fetch API是现代浏览器中提供的另一种用于发起HTTP请求的原生接口，相比于XMLHttpRequest，Fetch API提供了更简洁、更强大的功能。

以下是一个简单的示例，展示了如何使用Fetch API调用接口：

<!DOCTYPE html> <html> <head> <title>Fetch API示例</title> </head> <body> <button id="getData">获取数据</button> <div id="result"></div> <script> document.getElementById(getData).addEventListener(click, async function() { try { const response = await fetch(https://api.example.com/data); const data = await response.text(); document.getElementById(result).innerHTML = data; } catch (error) { console.error(请求失败：, error); } }); </script> </body> </html>

在这个示例中，我们同样创建了一个按钮，当点击该按钮时，会触发一个事件监听器，事件监听器中，我们使用fetch函数发起一个GET请求，由于fetch返回的是一个Promise对象，我们需要使用await关键字等待请求完成，当请求成功时，我们将服务器返回的数据显示在页面上，如果请求失败，我们会在控制台输出错误信息。

3、jQuery库中的AJAX方法

除了使用原生的JavaScript API，我们还可以使用第三方库，如jQuery，来实现与服务器的交互，jQuery提供了一个名为ajax的方法，可以方便地发起HTTP请求。

以下是一个简单的示例，展示了如何使用jQuery的ajax方法调用接口：