纯Javascript实现ping功能的方法

实现 "Ping" 功能，即测试主机之间的可靠性和延迟，可以使用 JavaScript 中的 XMLHttpRequest 对象来实现。

步骤1：创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

步骤2：绑定事件处理程序

因为 XMLHttpRequest 对象基于异步操作，所以我们需要将其用于“ping”操作时，需要监测它的状态并及时触发回调函数。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    // 处理响应
  }
};

步骤3：打开连接

在使用 XMLHttpRequest 对象向服务器端发送请求之前，必须调用 open() 方法打开连接并指定请求的目标 URL。

xhr.open('GET', '//www.example.com/ping', true);

步骤4：发送请求

xhr.send();

示例 1

实现一个简单的 Ping 操作，检查远程服务器是否可读取。

function ping(url, callback) {
  var start = new Date().getTime();
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      var end = new Date().getTime();
      var time = end - start;

      if (callback && typeof callback === 'function') {
        callback(time);
      }
    }
  };

  xhr.open('GET', url, true);
  xhr.send();
}

我们可以在一个标签内调用它：

<button onclick="ping('http://www.example.com', function(time) {
  alert('响应时间为 ' + time + ' 毫秒');
})">测试可读性</button>

示例 2

使用 setInterval() 方法实现 Ping 速率。

var t;
function pingRate(url, rate, callback) {
  t = setInterval(function() {
    ping(url, callback);
  }, rate);
}

我们可以调用 pingRate() 函数并每隔 5000 毫秒 ping 远程服务器。

pingRate('http://www.example.com', 5000, function(time) {
  console.log('每 5 秒响应时间：' + time + ' 毫秒');
});

以上就是基于 JavaScript 实现 Ping 功能的方法，我们可以灵活地应用它到不同的场景中。