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 相关文章推荐
Javascript面向对象之四 继承
Feb 08 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
用PHP和MySQL保存和输出图片
2006/10/09 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
javascript this用法小结
2008/12/19 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python的argparse库使用详解
2018/10/09 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
应届生会计求职信
2013/11/11 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers