javascript模拟的Ping效果代码 (Web Ping)


Posted in Javascript onMarch 13, 2011

当然,在请求时无法统计HTTP头部的长度,所以当请求数据包长度在最大传输单元临界点时,额外的HTTP头可以导致IP分组,因此存在一定的误差.(2009/6/21)

在线演示:http://demo.3water.com/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>
Javascript 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
js中巧用cssText属性批量操作样式
Mar 13 #Javascript
js中获取事件对象的方法小结
Mar 13 #Javascript
js中关于new Object时传参的一些细节分析
Mar 13 #Javascript
重载toString实现JS HashMap分析
Mar 13 #Javascript
JavaScript获取页面上某个元素的代码
Mar 13 #Javascript
jQuery hover 延时器实现代码
Mar 12 #Javascript
js中if语句的几种优化代码写法
Mar 12 #Javascript
You might like
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php绘制圆形的方法
2015/01/24 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
python开启debug模式的方法
2019/06/27 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Pytorch to(device)用法
2020/01/08 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python实现自动打卡的示例代码
2020/10/10 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
劳动模范事迹材料
2014/01/19 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
运动会100米加油稿
2015/07/21 职场文书
追悼会家属答谢词
2015/09/29 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL