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 相关文章推荐
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
详解javascript脚本何时会被执行
Feb 05 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
如何去掉文章里的 html 语法
2006/10/09 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
javascript String 对象
2008/04/25 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
react路由配置方式详解
2017/08/07 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
python选择排序算法的实现代码
2013/11/21 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
在Python中实现替换字符串中的子串的示例
2018/10/31 Python
python实现维吉尼亚加密法
2019/03/20 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
德国网上超市:myTime.de
2019/08/26 全球购物
ORACLE十问
2015/04/20 面试题
2014年党务公开实施方案
2014/02/27 职场文书
就业协议书怎么填
2014/04/11 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技