3.1 客户端
客户端是浏览器，在浏览器中访问服务端htm文件。htm文件采用Ajax技术，网页中嵌入Javascript脚本，调用XMLHttpRequest实时访问数据。Ajax中获取XMLHttpRequest对象的方法[3]。
针对Internet Explorer(IE)浏览器：
new ActiveXObject(“Msxml2.XMLHTTP”)；
new ActiveXObject(“Microsoft.XMLHTTP”)；
针对其他浏览器：
new window.XMLHttpRequest()；
对象建立后，就可以利用其方法和属性访问服务器端数据了。网页中的Javascript脚本，可以灵活控制数据的显示。
（1）数据的接收和显示
本系统中Web服务器端采集的多路设备的数据，其总路数是不确定的，因为每一路设备都同时工作，所以浏览器端需要根据总路数来增加或者减少显示的行数（这里采用表格显示接收到的数据），并且实现数据在正常范围显示为绿色，其余为红色醒目显示功能。为了提高数据的传输效率，还需要设计合理的数据传输格式。这里约定服务端返回的数据使用“；”号进行分割，第一个数据代表总路数，其后分别代表设备名称、电压值、电流值等。通过Javascript函数setInterval实时刷新网页数据[3]。关键代码如下：
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
function RefreshData() { //异步方式
xmlhttp.Open("GET", "realdata.htm", false);
xmlhttp.Send(null); //服务器返回的数据
strResult = xmlhttp.responseText;
//将字符串分开，其中arrResult[0]为总路数
arrResult = strResult.split(";");
var NumOfRow=arrResult[0]; //数据总行数
//根据数据的行数对原有表格进行添行和删行
addrows(arrResult[0],myTable.rows.length-1)
//留出第0行标题栏，数据计数num从1开始
for (num=1;num<=arrResult[0];num++) {
changetd(num,0,num);
changetd(num,4,arrResult[(num-1)*2+1]); changetd(num,5,arrResult[(num-1)*2+2]);
}
}
setInterval("RefreshData()",500);//每隔500ms刷新数据
changetd函数用于修改表格单元的值，在正常范围以颜色标志数据：
function changetd(r,d,c) {//r:行d:列c:修改内容
if(测量值在正常范围)
{myTable.rows(r).cells(d).innerHTML = "<font color=green>"+c+"</font>";}
else
|
