这几天在做一个Web监测系统,需要对多个Server进行监测,采用的做法就是把需要监测的Server在页面上显示出来,然后通过Ajax对各个Server进行异步监测,开始的时候,针对每个Server,我都采用同一个JS方法循环和后台进行异步通信,结果程序一跑,发现根本不能做到同时异步监测多个Server,因此我想到了在Web页面Load的时候,根据后台返回的Server的个数,动态为每个Server创建不同的JS函数来处理异步通信请求。这样就可以做到同时异步监测多个Server。代码如下:
Html代码,被监测的Server列表:
<body onload="initializeMethod()">
<table width="500">
<tr>
<td width="100%">
<table width="500" id="serverTab" border="1" cellpadding="0" cellspacing="0" align="left">
<tr bgcolor="#0099CC">
<td width="30%"><div align="center"> Host</div></td>
<td width="15%"><div align="center"> Port</div></td>
<td width="15%"><div align="center"> Interval(s)</div></td>
<td width="35%"><div align="center"> Comment</div></td>
</tr>
<s:iterator value="serverListByType" id="serverList" >
<tr>
<td><div align="left"><s:property value="host" /> </div></td>
<td><div align="left"><s:property value="port" /></div></td>
<td><div align="left"><s:property value="interval" /></div></td>
<td><div align="left"><s:property value="comment" /> </div></td>
</tr>
<br />
</s:iterator>
</table>
</td>
</tr>
</table>
</body>
JS代码,动态生成异步监测函数:
<script type="text/javascript">
var functionArray = new Array();
function initializeMethod(){
var serverTab=document.getElementById("serverTab");
for(var i = 1; i<=serverTab.rows.length-1; i++)
{
functionArray[i] = function(rowId){
var xmlHttp ;
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest;
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var tab=document.getElementById("serverTab");
var cbx = document.getElementsByName("server_id");
var interval = 0;
var first=true;
//tab.rows[rowId].bgColor='FFFFFF ';
//var minInterval = tab.rows[1].cells[3].children[0].value ;
var ServerLists="";
for(var j=0;j<tab.rows[rowId].cells.length;j++)
{
for(var z=0;z<tab.rows[rowId].cells[j].children.length;z++)
{
var cb= tab.rows[rowId].cells[j].children[z];
ServerLists+=cb.innerText;
ServerLists+=",";
}
}
ServerLists+="\n";
var url = "startMonitor";
var param = "serverList="+ServerLists;
xmlHttp.open("post",url,true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.onreadyStatechange=function(){
if(xmlHttp.readyState==4) {
if( xmlHttp.status == 200 ){
setInterval("functionArray["+rowId+"]("+rowId+")",interval);
if(xmlHttp.responseText == 0)
{
tab.rows[rowId].bgColor='#FF0000 ';
}else
{
tab.rows[rowId].bgColor='#33FF33';
}
}
} else {
}
}
xmlHttp.send(param);
};
}
refreshMonitorStatus();
}
function refreshMonitorStatus()
{
var tab=document.getElementById("serverTab");
var cbx = document.getElementsByName("server_id");
for(var i=1;i<=tab.rows.length-1;i++)
{
tab.rows[i].bgColor='FFFFFF ';
functionArray[i](i);
}
}
</script>
分享到:
相关推荐
第二部分详细介绍了Prototype、jQuery、DWR、AjaxTags等四个最常用的Ajax框架的用法,并针对每个框架提供了一个实用案例。这两个部分是笔者在“疯狂Java实训营”的培训讲义,是《疯狂Ajax讲义:Prototype/jQuery+DWR+...
JavaScript设计模式+JavaScript模式+JavaScript异步编程,合计三本pdf文件,5分超值哦。
求异步队列的最大执行队列,JavaScript中有多个异步请求,每次最多执行n个(10个),实现一个函数,使每次执行都是最大队列 。 { this.tasks = []; this.max = 10; setTimeout(() => { this.run(); }); }...
在QML中想要动态创建组件,一般有两种方法: 1、使用Loader。 2、使用JavaScript:Qt.createComponent() / Qt.createQmlObject()。
JavaScript异步编程 设计快速响应的网络应用
该项目是javaJeb技术的实战操作,采用了MVC设计模 式,包括基本的entity, jscript, servlet,以及ajax异步请 求,查询分页,持久化层方法的封装等等,对javaweb技 术的巩固很有帮助,为J2EE的学习打下基础,适用于...
Javscript高性能编程+Javascript异步编程 高清晰PDF
前端使用:layui + javascript + jquery + div + css 后端使用:javaweb + servlelt + 数据库连接池 + jdbc + 过滤器 1,登录功能,验证码,登录成功进入主页面,分普通用户和管理员用户权限 2,注册功能,验证码,注册...
我自己写的,那出来与大家分享:javascript下动态创建表格的三种方式
shiro权限控制,结合ajax实现了异步认证与异步授权,同时实现了细粒度的权限动态分配(到按钮级别);添加了shiro session过期的登录跳转 jQuery EasyUI开发前端页面,利用jQuery文件上传插件实现拖拽上传的效果并...
1. 前后端分离:前端 Echarts JavaScript BootStrap; 后端Python Flask; 2. 数据动态更新:服务端触发数据源的变化,前端AJAX自动获取最新数据并渲染到Echarts图表上; 3. 数据格式:JSON; 更多Python&Echarts版...
如资源名,使用JAVASCRIPT动态创建一个Select元素和text元素
Javascript异步编程的4种方法
实时疫情地图及全国监测动态大屏可视化.zip是一个包含实时疫情地图和全国监测动态大屏可视化的压缩文件。该资源可以帮助用户实时了解全国疫情的分布情况,以及各个地区的疫情监测数据,为企业、政府机构和公众提供...
ASP.Net:Javascript 通过PageMethods 调用后端WebMethod方法 + 多线程数据处理 示例 .
基于Verilog+javaScript+html+css开发的自动售货机+异步输入,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 基于Verilog+javaScript+html+css开发的自动售货机+...
本内容梳理了20个高频面试题,涵盖了JavaScript的基础知识、高级特性以及编程技巧,帮助求职者深入理解JavaScript的核心概念,提升面试表现。 适应人群: 即将参加前端开发岗位面试的求职者 希望提升JavaScript技能...
使用JavaScript和DOM动态创建表格
1 JavaScript速览:进入JavaScript的世界 阅读 2 编写代码:更进一步 3 函数简介:养成函数思维 4 让数据排排坐:数组 5 理解对象:对象镇之旅 6 与网页交互:了解DOM 7 类型、相等、转换等:系统...
深入理解 JavaScript 异步