实时显示网页 Ping 信息的 3 种方法

要在网页中实时显示 Ping 信息，可以使用 JavaScript 来实现。下面是一些可能的方法：

1. 使用 Ajax 请求

Ajax 是一种在不刷新整个页面的情况下更新部分页面的技术，可以通过 Ajax 请求来获取 Ping 信息并将其显示在网页中。具体来说，可以使用 XMLHttpRequest 对象来发送异步请求，然后在请求成功的回调函数中更新网页内容。以下是一个简单的示例代码：

function updatePing() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var pingInfo = xhr.responseText;
      document.getElementById('pingDisplay').innerHTML = pingInfo;
    }
  };
  xhr.open('GET', 'ping.php', true);
  xhr.send();
}

setInterval(updatePing, 1000); // 每秒钟更新一次 Ping 信息

在这个例子中，我们定义了一个名为 updatePing 的函数，它会发送一个 GET 请求到 ping.php 文件中，并在请求成功后将返回的文本信息显示在 id 为 'pingDisplay' 的元素中。最后，我们使用 setInterval 函数来每秒钟调用一次 updatePing 函数，从而实现实时更新 Ping 信息的效果。

2. 使用 WebSocket

WebSocket 是一种在客户端和服务器之间建立持久连接的技术，可以实现实时通信。如果服务器端能够提供实时的 Ping 信息，我们可以使用 WebSocket 来接收并显示这些信息。以下是一个简单的示例代码：

var socket = new WebSocket('ws://example.com/ping');

socket.onmessage = function(event) {
  var pingInfo = event.data;
  document.getElementById('pingDisplay').innerHTML = pingInfo;
};

在这个例子中，我们创建了一个 WebSocket 对象，并指定了要连接的服务器地址和端口。然后，我们定义了一个 onmessage 事件处理函数，用于接收服务器端发送的 Ping 信息，并将其显示在网页中。

需要注意的是，WebSocket 需要服务器端的支持，而且不是所有浏览器都支持 WebSocket。如果您想要使用 WebSocket，请确保您的服务器端已经实现了 WebSocket 协议，并检查您的目标浏览器是否支持该协议。

3. 使用 Server-Sent Events

Server-Sent Events 是一种在服务器端向客户端推送数据的技术，可以实现实时更新。与 WebSocket 相比，Server-Sent Events 更加简单，并且可以在不支持 WebSocket 的浏览器中使用。以下是一个简单的示例代码：

var source = new EventSource('ping.php');

source.onmessage = function(event) {
  var pingInfo = event.data;
  document.getElementById('pingDisplay').innerHTML = pingInfo;
};

在这个例子中，我们创建了一个 EventSource 对象，并指定了要连接的服务器端脚本地址。然后，我们定义了一个 onmessage 事件处理函数，用于接收服务器端发送的 Ping 信息，并将其显示在网页中。

需要注意的是，Server-Sent Events 需要服务器端的支持，而且不是所有浏览器都支持该技术。如果您想要使用 Server-Sent Events，请确保您的服务器端已经实现了该技术，并检查您的目标浏览器是否支持该技术。