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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
Oct 16 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
原生js实现表格翻页和跳转
Sep 29 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
JavaScript实现班级抽签小程序
May 19 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
模仿OSO的论坛(一)
2006/10/09 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
浅谈PHP的反射机制
2016/12/15 PHP
理解JSON:3分钟课程
2011/10/28 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
javascript排序函数实现数字排序
2015/06/26 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
利用Python循环(包括while&amp;for)各种打印九九乘法表的实例
2017/11/06 Python
5款非常棒的Python工具
2018/01/05 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
2019年.net常见面试问题
2012/02/12 面试题
土木工程专业个人求职信
2013/12/30 职场文书
学校火灾防控方案
2014/06/09 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
运动会运动员赞词
2015/07/22 职场文书
开学第一天的感想
2015/08/10 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang