网络信息API(JS)

介绍

网络信息API提供了JavaScript接口，以便访问各种与网络相关的信息，例如：HTTP协议、域名系统等。我们可以使用这些API构建类似于浏览器，爬虫等应用程序。在本文中，我们将讨论一些常用的JavaScript网络信息API，并给出相应的代码示例。

XMLHttpRequest (XHR)

XMLHttpRequest是一个同时支持同步和异步HTTP请求的JS对象。通过它，我们可以访问和获取远程服务器上的数据。使用XHR，我们可以：

• 发送HTTP请求
• 设置请求头和参数
• 获取响应头和响应体
• 监听请求状态的变化等

以下是XHR发送异步GET请求的示例代码：

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

Fetch API

Fetch API是一种新型的Web API，它提供了一种更简单，更强大，更具可扩展性的方式来获取资源。Fetch API基于Promise并且可以像XHR一样处理HTTP请求的参数、响应等信息。以下是使用Fetch API发送GET请求的示例代码：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

WebSocket API

WebSocket API提供了一种双向通信通道，使得客户端和服务器之间可以进行实时通信。与 HTTP 动词方法不同，WebSocket 是一个协议。使用WebSocket，可以在一个套接字上进行双向通信并发送任意数据。以下是创建WebSocket的示例代码：

let socket = new WebSocket("wss://echo.websocket.org");

socket.onopen = function(e) {
  console.log("[open] Connection established");
  console.log("Sending to server");
  socket.send("Hello WebSocket!");
};

socket.onmessage = function(event) {
  console.log(`[message] Data received from server: ${event.data}`);
};

socket.onclose = function(event) {
  console.log("[close] Connection closed", event.code, event.reason);
};

socket.onerror = function(error) {
  console.error(`[error] ${error.message}`);
};

Conclusion

本文涵盖了一些JavaScript网络信息API的介绍。在我们的应用程序中，使用这些API可以轻松地访问远程服务器，获取数据，甚至实现实时通信。以上仅为常用API，还有更多使用详见 MDN Web Docs 官方文档。