许多现代Web应用程序使用RESTful Web服务API来获取或提交数据。在前端开发中，我们通常需要从JavaScript代码中调用这些API以便在Web页面上动态显示内容。
本文将介绍如何编写JavaScript代码来从Web页面上的按钮处理程序中调用RESTful Web服务API。
步骤1：创建XMLHttpRequest对象
在JavaScript代码中，我们需要使用XMLHttpRequest对象来发送HTTP请求并从Web服务器获取响应。我们可以通过以下方式创建一个新的XMLHttpRequest对象：
var xmlhttp = new XMLHttpRequest();
步骤2：定义请求方法和URL
接下来，我们需要定义HTTP请求的方法（GET、POST、PUT等）和请求的Web服务API的URL。例如：
xmlhttp.open("GET", "https://api.example.com/data", true);这里我们使用了GET方法，并向https://api.example.com/data发送了一个请求。
步骤3：设置请求头
在向Web服务器发送HTTP请求时，我们可能需要设置一些请求头，例如Content-Type、Authorization等。我们可以使用以下代码设置请求头：
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.setRequestHeader("Authorization", "Bearer <access_token>");这里我们设置了Content-Type为application/json，并添加了一个授权令牌。
步骤4：发送请求并处理响应
发送HTTP请求之前，我们需要为XMLHttpRequest对象指定一个回调函数，以便在响应到达时执行某些操作。例如：
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
// 在这里处理响应数据
}
};在回调函数中，我们检查XMLHttpRequest对象的readyState和status属性以确定是否成功接收到响应。如果状态码为200，则表示请求成功，并且响应数据存储在responseText属性中。在这里，我们使用JSON.parse将响应数据解析为JavaScript对象。
示例代码
下面是一个完整的JavaScript代码示例，它从Web页面上的按钮处理程序中调用RESTful Web服务API，并将响应数据显示在Web页面上：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------- ---------------
--------
-------- --------- -
--- ------- - --- -----------------
------------------- ------------------------------- ------
---------------------------------------- --------------------
----------------------------------------- ------- -----------------
-------------------------- - ---------- -
-- ---------------- -- - -- ----------- -- ---- -
--- -------- - ------------------------------
----------------------------------------- - --------------
-
--
---------------
-
---------
-------
------
------- ----------------------- -------------
---- ----------------
-------
-------在此示例中，我们创建了一个名为getData的JavaScript函数，并将其绑定到按钮的onclick事件处理程序上。当用户点击按钮时，该函数将使用XMLHttpRequest对象发送一个GET请求，并在成功接收到响应后将响应数据显示在Web页面上的data元素中。
结论
本文介绍了如何从JavaScript代码中调用RESTful Web服务API以获取或提交数据。通过使用XMLHttpRequest对象和一些基本的HTTP请求和响应处理技术，我们可以轻松地与Web服务器进行通信，并在Web页面上动态显示内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31056