JavaScript API 调用

JavaScript API 调用是指在 JavaScript 中使用 API 接口向服务器发送请求或获取数据，实现网页的动态交互效果。在 Web 开发中，JavaScript API 调用被广泛使用，如调用微信、支付宝等第三方 API 接口。

XMLHttpRequest

XMLHttpRequest 是一种在 JavaScript 中创建 HTTP 请求的 API，可以向服务器发送请求并获取数据。该 API 支持异步请求和同步请求，常见的用法为异步请求。以下是一个使用 XMLHttpRequest 发送 GET 请求的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

上述代码中，首先使用 new XMLHttpRequest() 创建了一个 XMLHttpRequest 实例，然后使用 xhr.open() 方法打开一个 GET 请求，设置请求的 URL。接着使用 xhr.onload 方法监听请求的响应，并在响应结束后执行回调函数。如果请求成功，状态码为 200，则读取响应体中的数据并将其解析成 JSON 格式。最后，使用 xhr.send() 方法发送请求。

fetch

fetch 是 JavaScript 中的另一个 API，它提供了一种更简单、更优雅的方式来发送 HTTP 请求。fetch API 返回一个 Promise 对象，可以使用 .then() 方法链式调用。

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

上述代码中，首先使用 fetch() 方法发起了一个 GET 请求，设置请求的 URL。接着使用 .then() 方法链式调用，读取响应体中的数据并将其解析成 JSON 格式。最后将解析后的数据打印到控制台。

WebSocket

WebSocket 是一种在 Web 应用程序中实现双向通信的技术。在 JavaScript 中使用 WebSocket API，可以在客户端与服务器之间建立长时间的连接，实现实时通信。以下是一个使用 WebSocket API 发送消息的示例代码：

const socket = new WebSocket('ws://localhost:8080');
socket.addEventListener('open', function (event) {
  socket.send('Hello Server!');
});

上述代码中，首先使用 new WebSocket() 创建了一个 WebSocket 实例，设置连接的 URL。接着使用 socket.addEventListener() 方法监听 WebSocket 连接成功的事件，连接成功时发送一条消息。

总结

JavaScript API 调用是 Web 开发中的重要组成部分，通常使用 XMLHttpRequest、fetch 和 WebSocket API 实现。通过这些 API，可以向服务器发送请求或获取数据，实现动态交互效果和实时通信。