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自带函数备忘 数组
Dec 29 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
Aptana调试javascript图解教程
Nov 30 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
BootStrap 可编辑表Table格
Nov 24 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 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乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
jQuery Ajax全解析
2017/02/13 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Python与Java间Socket通信实例代码
2017/03/06 Python
python之PyMongo使用总结
2017/05/26 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Python实现图片添加文字
2019/11/26 Python
Python流程控制常用工具详解
2020/02/24 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
北大青鸟学生求职信
2013/09/24 职场文书
商场总经理岗位职责
2014/02/03 职场文书
一月红领巾广播稿
2014/02/11 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js