上次说了,无刷新下拉框的应用,其实这个思路很容易扩展的,我们也可以应用于表格图。原理就是在服务端生成html表格,客户端定时刷新,付值就行了。
服务端返回xml
<PCM>
<Data>
<Name>
表格表
</Name>
</Data>
</PCM>
下面是客户端的代码。
1、html主要代码
<table>
<tr><td><DIV id="myData"></DIV></td><td><div id="myData1"></div></td></tr>
<tr><td><div id="myData2"></div></td><td><div id="myData3"></div></td></tr>
</table>
用于显示四个表格
2、js的代码
<script>
var nTemp = 0;
//取数据
function locadData()
{
//一个负责发送请求另一个负责得到响应结果
var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
oHttpReq.open("POST", "noFreshData.aspx", false);
oHttpReq.send("");
result = oHttpReq.responseText;
oDoc.loadXML(result);
items = oDoc.selectNodes("//PCM/Data");
if(items.length > 0)
{
for(i = 0;i < items.length;i ++)
{
if(i == 0)
{
myData.innerHTML = items[0].selectSingleNode("Name").text;
}
if(i == 1)
{
myData1.innerHTML = items[1].selectSingleNode("Name").text;
}
if(i == 2)
{
myData2.innerHTML = items[2].selectSingleNode("Name").text;
}
if(i == 3)
{
myData3.innerHTML = items[3].selectSingleNode("Name").text;
}
}
}
else
{
myData.innerHTML = "暂无数据!";
}
}
//定时刷新
function freshByTime()
{
//第一次加载数据不让延时
if(nTemp == 0)
{
locadData();
nTemp ++;
freshByTime();
}
else
{
//5秒自动刷新一次,5秒取得一次数据.
timer = window.setInterval("locadData()",5000);
}
}
</script>
下面是效果图
服务端返回xml
<PCM>
<Data>
<Name>
表格表
</Name>
</Data>
</PCM>
下面是客户端的代码。
1、html主要代码
<table>
<tr><td><DIV id="myData"></DIV></td><td><div id="myData1"></div></td></tr>
<tr><td><div id="myData2"></div></td><td><div id="myData3"></div></td></tr>
</table>
用于显示四个表格
2、js的代码
<script>
var nTemp = 0;
//取数据
function locadData()
{
//一个负责发送请求另一个负责得到响应结果
var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
oHttpReq.open("POST", "noFreshData.aspx", false);
oHttpReq.send("");
result = oHttpReq.responseText;
oDoc.loadXML(result);
items = oDoc.selectNodes("//PCM/Data");
if(items.length > 0)
{
for(i = 0;i < items.length;i ++)
{
if(i == 0)
{
myData.innerHTML = items[0].selectSingleNode("Name").text;
}
if(i == 1)
{
myData1.innerHTML = items[1].selectSingleNode("Name").text;
}
if(i == 2)
{
myData2.innerHTML = items[2].selectSingleNode("Name").text;
}
if(i == 3)
{
myData3.innerHTML = items[3].selectSingleNode("Name").text;
}
}
}
else
{
myData.innerHTML = "暂无数据!";
}
}
//定时刷新
function freshByTime()
{
//第一次加载数据不让延时
if(nTemp == 0)
{
locadData();
nTemp ++;
freshByTime();
}
else
{
//5秒自动刷新一次,5秒取得一次数据.
timer = window.setInterval("locadData()",5000);
}
}
</script>
下面是效果图