ajax模式显示xml

最新推荐文章于 2025-05-10 12:40:26 发布

原创最新推荐文章于 2025-05-10 12:40:26 发布 · 636 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #function #javascript #table #border

网络编程专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript处理XML文件并将其内容动态加载到HTML表格中的方法。该过程涉及从XML源获取数据，解析这些数据，并更新网页上显示的信息。通过定时刷新功能实现了数据的实时更新。

var req = null;

var xmlPath;

function processReqChange() {
if (req.readyState == 4 && req.status == 200 && req.responseXML )
{
  var dtable = document.getElementById( 'dataBody' );
  var tableClear = document.getElementById("dataBody").childNodes;
// alert(tableClear.length);
  var length = tableClear.length;

  for(var ii = length-1; ii >0; ii-- )
  {
  // alert(length-ii);
   var temp = tableClear[ii];
   document.getElementById("dataBody").removeChild(temp);
  }
// alert(dtable);
  var nl = req.responseXML.getElementsByTagName( 'IVRServer' );
  for( var i = 0; i < nl.length; i++ )
  {
   var nli = nl.item( i );
   var elID = nli.getElementsByTagName( 'ID' );
   var ID = elID.item(0).firstChild.nodeValue;
//  var elID2 = nli.getElementsByTagName( 'ID' );
//  var ID2 = elID2.item(0).firstChild.nodeValue;
   var Name = ID;
   var elCPU = nli.getElementsByTagName( 'CPU' );
   var CPU = elCPU.item(0).firstChild.nodeValue;
   var elStatus = nli.getElementsByTagName( 'Status' );
   var Status = elStatus.item(0).firstChild.nodeValue;
   var elTotalPhy = nli.getElementsByTagName( 'TotalPhy' );
   var TotalPhy = elTotalPhy.item(0).firstChild.nodeValue;
   var elAvailPhy = nli.getElementsByTagName( 'AvailPhy' );
   var AvailPhy = elAvailPhy.item(0).firstChild.nodeValue;
   var elTotalVirtual = nli.getElementsByTagName( 'TotalVirtual' );
   var TotalVirtual = elTotalVirtual.item(0).firstChild.nodeValue;
   var elAvailvirtual = nli.getElementsByTagName( 'Availvirtual' );
   var Availvirtual = elAvailvirtual.item(0).firstChild.nodeValue;
   var elBlooeyChannels = nli.getElementsByTagName( 'BlooeyChannels' );
   var BlooeyChannels = elBlooeyChannels.item(0).firstChild.nodeValue;
   var elRunningChannels = nli.getElementsByTagName( 'RunningChannels' );
   var RunningChannels = elRunningChannels.item(0).firstChild.nodeValue;
   var elIdleChannels = nli.getElementsByTagName( 'IdleChannels' );
   var IdleChannels = elIdleChannels.item(0).firstChild.nodeValue;

   var elTr = dataBody.insertRow( -1 );

   var elIDTd = elTr.insertCell( -1 );
   elIDTd.innerHTML = ID;
   var elNameTd = elTr.insertCell( -1 );
   elNameTd.innerHTML = Name;
   var elCPUTd = elTr.insertCell( -1 );
   elCPUTd.innerHTML = CPU;
   var elTotalPhyTd = elTr.insertCell( -1 );
   elTotalPhyTd.innerHTML = TotalPhy;
   var elStatusTd = elTr.insertCell( -1 );
   elStatusTd.innerHTML = Status;
//  var elAvailPhyTd = elTr.insertCell( -1 );
//  elAvailPhyTd.innerHTML = AvailPhy;
//  var elTotalVirtualTd = elTr.insertCell( -1 );
//  elTotalVirtualTd.innerHTML = TotalVirtual;
//  var elAvailvirtualTd = elTr.insertCell( -1 );
//  elAvailvirtualTd.innerHTML = Availvirtual;
   var elBlooeyChannelsTd = elTr.insertCell( -1 );
   elBlooeyChannelsTd.innerHTML = BlooeyChannels;
   var elRunningChannelsTd = elTr.insertCell( -1 );
   elRunningChannelsTd.innerHTML = RunningChannels;
   var elIdleChannelsTd = elTr.insertCell( -1 );
   elIdleChannelsTd.innerHTML = IdleChannels;
  }
}
}

req.open('GET', xmlPath, true);
req.send('');
}
}

function MyShow(){
//2秒自动刷新一次,2秒取得一次数据.
timer = window.setInterval("loadXMLDoc()",2000);
}
//var url = window.location.toString();
//url = url.replace( /pat2_xml.html/, 'temp.xml' );
//alert(url);
MyShow();

</script>

<html>
<form action="POST">
    <table cellspacing="0" cellpadding="3" width="100%">
    <table border="1">
<tbody id="dataBody">
<tr><td>名称</td><td>ID</td><td>CPU状态</td><td>内存状态</td><td>状态</td><td>故障通道数</td><td>运行通道数</td><td>空闲通道数</td></tr>
</tbody>
    </table>
</form>

</html>