javascript模拟的Ping效果代码 （Web Ping）
更新时间：2011年03月13日 23:44:04 作者：
JS虽然发送不了真正Ping的ICMP数据包,但Ping的本质仍然是请求/回复的时间差,HTTP自然可以实现此功能.
当然,在请求时无法统计HTTP头部的长度,所以当请求数据包长度在最大传输单元临界点时,额外的HTTP头可以导致IP分组,因此存在一定的误差.(2009/6/21)
在线演示：http://demo.jb51.net/js/2011/ping/
核心代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTTP Ping</title>
<style>
html
{
height: 100%;
overflow: hidden;
}
body
{
background: #000;
color: #C0C0C0;
font-weight: bold;
font-size: 14px;
font-family: Lucida Console;
height: 100%;
margin: 0 0 0 5px;
}
#divContent
{
height: 90%;
overflow: auto;
}
#txtTimeout
{
width: 40px;
}
button
{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="divInput">
<span>URL:</span>
<input id="txtURL" type="text" />
<span>Timeout:</span>
<input id="txtTimeout" type="text" value="2000" />
<input id="btnSwitch" type="button" value="Start" onclick="handleBtnClick()" />
<hr/>
</div>
<div id="divContent"></div>
<script>
var intStartTime;
var objIMG = new Image();
objIMG.onload =
objIMG.onerror =
function()
{
/*
* 有回应,取消超时计时
*/
clearTimeout(intTimerID);
if(!bolIsRunning || bolIsTimeout)
return;
var delay = new Date() - intStartTime;
println("Reply from " +
strURL +
" time" +
((delay<1)?("<1"):("="+delay)) +
"ms");
arrDelays.push(delay);
/*
* 每次请求间隔限制在1秒以上
*/
setTimeout(ping, delay<1000?(1000-delay):1000);
}
function ping()
{
/*
* 发送请求
*/
intStartTime = +new Date();
intSent++;
objIMG.src = strURL + "/" + intStartTime;
bolIsTimeout = false;
/*
* 超时计时
*/
intTimerID = setTimeout(timeout, intTimeout);
}
function timeout()
{
if(!bolIsRunning)
return;
bolIsTimeout = true;
objIMG.src = "X:\\";
println("Request timed out.");
ping();
}
</script>
<script>
var $ = function(v){return document.getElementById(v)};
var arrDelays = [];
var intSent;
var bolIsRunning = false;
var bolIsTimeout;
var strURL;
var intTimeout;
var intTimerID;
var objBtn = $("btnSwitch");
var objContent = $("divContent");
var objTxtURL = $("txtURL");
objTxtURL.value = window.location.host;
function handleBtnClick()
{
if(bolIsRunning)
{
/*
* 停止
*/
var intRecv = arrDelays.length;
var intLost = intSent-intRecv;
var sum = 0;
for(var i=0; i<intRecv; i++)
sum += arrDelays[i];
objBtn.value = "Start";
bolIsRunning = false;
/*
* 统计结果
*/
println(" ");
println("Ping statistics for " + strURL + ":");
println(" Packets: Sent = " +
intSent +
", Received = " +
intRecv +
", Lost = " +
intLost +
" (" +
Math.floor(intLost / intSent * 100) +
"% loss),");
if(intRecv == 0)
return;
println("Approximate round trip times in milli-seconds:");
println(" Minimum = " +
Math.min.apply(this, arrDelays) +
"ms, Maximum = " +
Math.max.apply(this, arrDelays) +
"ms, Average = " +
Math.floor(sum/intRecv) +
"ms");
}
else
{
/*
* 开始
*/
strURL = objTxtURL.value;
if(strURL.length == 0)
return;
if(strURL.substring(0,7).toLowerCase() != "http://")
strURL = "http://" + strURL;
intTimeout = parseInt($("txtTimeout").value, 10);
if(isNaN(intTimeout))
intTimeout = 2000;
if(intTimeout < 1000)
intTimeout = 1000;
objBtn.value = "Stop ";
bolIsRunning = true;
arrDelays = [];
intSent = 0;
cls();
println("Pinging " + strURL + ":");
println(" ");
ping();
}
}
function println(str)
{
var objDIV = document.createElement("div");
if(objDIV.innerText != null)
objDIV.innerText = str;
else
objDIV.textContent = str;
objContent.appendChild(objDIV);
objContent.scrollTop = objContent.scrollHeight;
}
function cls()
{
objContent.innerHTML = "";
}
</script>
</body>
</html>
在线演示：http://demo.jb51.net/js/2011/ping/
核心代码：
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTTP Ping</title>
<style>
html
{
height: 100%;
overflow: hidden;
}
body
{
background: #000;
color: #C0C0C0;
font-weight: bold;
font-size: 14px;
font-family: Lucida Console;
height: 100%;
margin: 0 0 0 5px;
}
#divContent
{
height: 90%;
overflow: auto;
}
#txtTimeout
{
width: 40px;
}
button
{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="divInput">
<span>URL:</span>
<input id="txtURL" type="text" />
<span>Timeout:</span>
<input id="txtTimeout" type="text" value="2000" />
<input id="btnSwitch" type="button" value="Start" onclick="handleBtnClick()" />
<hr/>
</div>
<div id="divContent"></div>
<script>
var intStartTime;
var objIMG = new Image();
objIMG.onload =
objIMG.onerror =
function()
{
/*
* 有回应,取消超时计时
*/
clearTimeout(intTimerID);
if(!bolIsRunning || bolIsTimeout)
return;
var delay = new Date() - intStartTime;
println("Reply from " +
strURL +
" time" +
((delay<1)?("<1"):("="+delay)) +
"ms");
arrDelays.push(delay);
/*
* 每次请求间隔限制在1秒以上
*/
setTimeout(ping, delay<1000?(1000-delay):1000);
}
function ping()
{
/*
* 发送请求
*/
intStartTime = +new Date();
intSent++;
objIMG.src = strURL + "/" + intStartTime;
bolIsTimeout = false;
/*
* 超时计时
*/
intTimerID = setTimeout(timeout, intTimeout);
}
function timeout()
{
if(!bolIsRunning)
return;
bolIsTimeout = true;
objIMG.src = "X:\\";
println("Request timed out.");
ping();
}
</script>
<script>
var $ = function(v){return document.getElementById(v)};
var arrDelays = [];
var intSent;
var bolIsRunning = false;
var bolIsTimeout;
var strURL;
var intTimeout;
var intTimerID;
var objBtn = $("btnSwitch");
var objContent = $("divContent");
var objTxtURL = $("txtURL");
objTxtURL.value = window.location.host;
function handleBtnClick()
{
if(bolIsRunning)
{
/*
* 停止
*/
var intRecv = arrDelays.length;
var intLost = intSent-intRecv;
var sum = 0;
for(var i=0; i<intRecv; i++)
sum += arrDelays[i];
objBtn.value = "Start";
bolIsRunning = false;
/*
* 统计结果
*/
println(" ");
println("Ping statistics for " + strURL + ":");
println(" Packets: Sent = " +
intSent +
", Received = " +
intRecv +
", Lost = " +
intLost +
" (" +
Math.floor(intLost / intSent * 100) +
"% loss),");
if(intRecv == 0)
return;
println("Approximate round trip times in milli-seconds:");
println(" Minimum = " +
Math.min.apply(this, arrDelays) +
"ms, Maximum = " +
Math.max.apply(this, arrDelays) +
"ms, Average = " +
Math.floor(sum/intRecv) +
"ms");
}
else
{
/*
* 开始
*/
strURL = objTxtURL.value;
if(strURL.length == 0)
return;
if(strURL.substring(0,7).toLowerCase() != "http://")
strURL = "http://" + strURL;
intTimeout = parseInt($("txtTimeout").value, 10);
if(isNaN(intTimeout))
intTimeout = 2000;
if(intTimeout < 1000)
intTimeout = 1000;
objBtn.value = "Stop ";
bolIsRunning = true;
arrDelays = [];
intSent = 0;
cls();
println("Pinging " + strURL + ":");
println(" ");
ping();
}
}
function println(str)
{
var objDIV = document.createElement("div");
if(objDIV.innerText != null)
objDIV.innerText = str;
else
objDIV.textContent = str;
objContent.appendChild(objDIV);
objContent.scrollTop = objContent.scrollHeight;
}
function cls()
{
objContent.innerHTML = "";
}
</script>
</body>
</html>
相关文章
这篇文章主要介绍了ES6函数和数组用法,结合实例形式分析了ES6函数和数组基本功能、原理、用法与操作注意事项,需要的朋友可以参考下2020-05-05
本文主要介绍了TypeScript声明合并的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了微信小程序的授权实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了JS实现表单中点击小眼睛显示隐藏密码框中的密码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下2020-04-04
兼容IE和火狐JS父窗口调用iframe里面的对象、函数的方法2009-12-12
下面小编就为大家带来一篇原生JS封装animate运动框架的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
本文给大家分享基于js实现输入框与清空框按钮联动效果，非常实用，代码简单易懂，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了javascript验证邮件地址和MX记录的方法,涉及javascript正则验证的相关技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了TableSort.js表格排序插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
本篇文章主要介绍了js获取浏览器各种属性的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
最新评论