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 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 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中file_exists函数使用详解
2015/05/08 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP简单遍历对象示例
2016/09/28 PHP
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
JS实现页面打印功能
2017/03/16 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
利用node.js如何创建子进程详解
2017/12/09 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
Python编程之event对象的用法实例分析
2017/03/23 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Python 如何对文件目录操作
2020/07/10 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
学校交通安全责任书
2014/08/25 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
教师继续教育反思周记
2015/06/25 职场文书
感恩教师节主题班会
2015/08/12 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python