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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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
如何使用Linux的Crontab定时执行PHP脚本的方法
2011/12/19 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
python基础教程之获取本机ip数据包示例
2014/02/10 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python多线程下信号处理程序示例
2019/05/31 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
教师档案管理制度
2014/01/23 职场文书
上课迟到检讨书
2014/02/19 职场文书
2014国培学习感言
2014/03/05 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
行为规范主题班会
2015/08/13 职场文书
开学随笔
2015/08/15 职场文书
2016年学校招生广告语
2016/01/28 职场文书
高二数学教学反思
2016/02/18 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang