这几天在做一个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>
分享到：
相关推荐
设计模式和异步编程是提升JavaScript代码质量和效率的关键。以下将详细介绍这三本书所涵盖的知识点： 1. **JavaScript设计模式**： 设计模式是软件工程中经过实践验证的、解决常见问题的有效方法。在JavaScript中...
这两种JavaScript方法可以让你在运行时动态地创建组件，但需要注意的是，它们都在JavaScript上下文中进行，可能涉及线程同步问题。如果在非主线程中使用，记得使用异步方式，以避免阻塞UI。 异步加载组件是处理大...
"JavaScript高性能编程"和"JavaScript异步编程"是两个关键的JavaScript专题，对于提升应用程序的性能和用户体验至关重要。 一、JavaScript高性能编程 1. **优化代码执行效率**：了解JavaScript引擎的工作原理，如...
该压缩包包含的是一个使用Python和Echarts库构建的数据可视化项目，主要目标是实现一个动态实时的、支持拖拉拽功能的...开发者可以借此学习到数据可视化、Python GUI编程、数据库操作以及前后端交互等多个方面的知识。
dtree是一款基于JavaScript的树形控件，它能够帮助开发者实现动态、交互式的树状菜单。而Ajax（Asynchronous JavaScript and XML）则是一种在不重新加载整个网页的情况下更新部分网页的技术。当dtree与Ajax结合时，...
【基于jsp+servlet+Ajax异步登陆模拟web项目】是一个典型的Web开发实例，它整合了三种核心技术：JavaServer Pages（JSP）、Servlet以及Asynchronous JavaScript and XML（Ajax）。这个项目的核心目的是实现用户登录...
5. **异步编程**：介绍回调函数、Promise、async/await等处理异步操作的方法。 而《JavaScript高效图形编程》这本书则可能专注于JavaScript在图形和动画方面的应用，可能涵盖： 1. **Canvas API**：Canvas是HTML5...
以下将根据提供的资源——"JavaScript知识大全"，以及包含的两个文件"JS的方法集.chm"和"JavaScript.chm"，来详细介绍JavaScript的一些核心知识点。 1. **基础语法**： - 变量声明：JavaScript支持var、let和const...
1 JavaScript速览：进入JavaScript的世界 阅读 2 编写代码：更进一步 3 函数简介：养成函数思维 4 让数据排排坐：数组 5 理解对象：对象镇之旅 6 与网页交互：了解DOM 7 类型、相等、转换等：系统...
异步编程是JavaScript中一个重要的概念，它使得JavaScript可以在客户端异步执行任务，从而提高用户体验。但是，异步编程也会带来一些问题，例如回调地狱、代码难以维护等。在本文中，我们将讨论基于JavaScript的异步...
系统环境：Windows10 开发工具：Eclipse4.8.0 / MyEclipse2014 / IDEA 编码集：UTF-8 Java版本：JDK 1.8 服务器：tomcat 8.0 数据库：MySQL 5.5 系统采用技术：Servlet+jsp+mysql+jQuery+bootstrap+面向接口编程 ...
实现javascript异步调用 API: window.asyncall(function/functionName[,args,...][,function callback]) 参数说明： function/functionName:方法或方法名称 args：目标方法参数 callback：回调函数...
3. 动态更新页面：介绍如何使用JavaScript动态创建和修改DOM元素，实现页面交互效果。 **第五章：高级特性与实践** 最后，这一章将涵盖一些JavaScript的高级话题： 1. 异步编程：讲解回调函数、Promise和async/...
Jscex：回归JavaScript的异步流程控制类库 Jscex是JavaScript异步流程控制类库，旨在...Jscex是一个功能强大且灵活的JavaScript异步流程控制类库，能够解决JavaScript异步编程的难题，提高代码的执行效率和可读性。
总结，这个jQuery+Ajax异步加载分页代码实现了动态加载数据，提高了用户体验，同时允许自定义分页设置，具有很好的灵活性和实用性。通过理解并实践这个示例，开发者可以更好地掌握Ajax和jQuery在实际项目中的应用。
在这个场景中，“Struts2+ajax+json异步上传图片回显”是指利用Struts2框架，通过Ajax技术实现图片的异步上传，并通过JSON进行数据交互，最终实现在页面上即时回显上传的图片。 首先，让我们理解每个组件的作用： ...
- **框架内使用JavaScript**：实现动态更新框架内容。 - **Cookies管理**：设置、读取和删除Cookies。 **第二十二章：建立日历控件** - **综合应用**：利用JavaScript制作一个功能完善的日历控件。 #### 第四部分...
CSS3 引入了许多新特性，如动画、过渡、多列布局和响应式设计，用于创建现代网页。 3. JavaScript：这是一种强大的客户端脚本语言，用于增加网页的交互性。JavaScript 可以改变 HTML 元素的内容、样式，甚至可以...
在IT行业中，资源的异步动态加载是一种优化网页性能的关键技术。这主要涉及到JavaScript的异步编程和资源管理，特别是对于大型应用或者高流量网站，有效地加载和管理资源可以显著提高用户体验。以下是对标题和描述中...