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图片无缝滚动示例分享
Jan 20 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
Javascript中replace()小结
Sep 30 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
详解JavaScript的this指向和绑定
Sep 08 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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获取字段名示例分享
2014/03/03 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
JS和JQ的event对象区别分析
2014/11/24 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
React应用中使用Bootstrap的方法
2017/08/15 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
python重试装饰器示例
2014/02/11 Python
Python中的迭代器漫谈
2015/02/03 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
环境卫生标语
2014/06/09 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
军训决心书范文
2015/09/22 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
Java Spring读取和存储详细操作
2022/08/05 Java/Android