电脑网络: 全部 | 电脑诊所 | 图形图象 | 数据库 | IT论坛 | 硬件DIY | Web开发 | 编程语言 | 网络技术  
主题:利用XMLHTTP无刷新自动实时更新数据.

    
    
  
摘要
关键词
  发送私信

利用XMLHTTP无刷新自动实时更新数据.     wanghr100 [原作]  
关键字   利用XMLHTTP无刷新自动实时更新数据. 
出处    
 
 前些时间写了几篇关于XMLHTTP运用的实例.
(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)

近来看论坛上经常有人提问关于如何无刷新,自动更新数据.
传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.
但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.

我们可以让程序自动刷新.定时向服务器请求数据.5秒取一次数据,10秒取一次数据.
利用XMLHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据.

demo.htm    前台显示.


function GetResult()
{
/*
 *--------------- GetResult() -----------------
 * GetResult() 
 * 功能:通过XMLHTTP发送请求,返回结果.
 * 参数:str,字符串,发送条件.
 * 实例:GetResult();
 * author:wanghr100(灰豆宝宝.net)
 * update:2004-5-27 19:02
 *--------------- GetResult() -----------------
 */
    var oBao = new ActiveXObject("Microsoft.XMLHTTP");
    //特殊字符:+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
    //Update:2004-6-1 12:22
    oBao.open("POST","Server.asp",false);
    oBao.send();
    //服务器端处理返回的是经过escape编码的字符串.
    var strResult = unescape(oBao.responseText);
    //将字符串分开.
    var arrResult = strResult.split("###");
    RemoveRow(); //删除以前的数据.
    //将取得的字符串分开,并写入表格中.
    for(var i=0;i    {
        arrTmp = arrResult[i].split("@@@");
        num1 = arrTmp[0]; //字段num1的值
        num2 = arrTmp[1]; //字段num2的值
        row1 = tb.insertRow();
        cell1 = row1.insertCell();
        cell1.innerText = num1;
        cell2 = row1.insertCell();
        cell2.innerText = num2;
    }
}

function RemoveRow()
{
    //保留第一行表头,其余数据均删除.
    var iRows = tb.rows.length;
    for(var i=0;i    {
        tb.deleteRow(1);
    }
}

function MyShow()
{
    //2秒自动刷新一次,2秒取得一次数据.
    timer = window.setInterval("GetResult()",2000);
}





  
num1num2


Server.asp  后台读取数据

<%?@Language="javascript"?%>
<%
function?OpenDB(sdbname)
{
/*
?*---------------?OpenDB(sdbname)?-----------------
?*?OpenDB(sdbname)?
?*?功能:打开数据库sdbname,返回conn对象.
?*?参数:sdbname,字符串,数据库名称.
?*?实例:var?conn?=?OpenDB("database.mdb");
?*?author:wanghr100(灰豆宝宝.net)
?*?update:2004-5-12?8:18
?*---------------?OpenDB(sdbname)?-----------------
?*/
????var?connstr?=?"Provider=Microsoft.Jet.OLEDB.4.0;?Data?Source="+Server.MapPath(sdbname);
????var?conn?=?Server.CreateObject("ADODB.Connection");
????conn.Open(connstr);
????return?conn;
}
var?sResult?=?new?Array();
var?oConn?=?OpenDB("data.mdb");
//特殊字符:+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的
//所以服务器端先要经过unescape解码.
//Update:2004-6-1?12:22
var?sql?=?"select?num1,num2?from?nums?order?by?id";
var?rs?=?oConn.Execute(sql);
while(!rs.EOF)
{
????//一条记录用"###"隔开.每列数据用"@@@"隔开.?这是以只有两个列数据的情况.
????sResult[sResult.length]?=?rs("num1").value?+?"@@@"?+?rs("num2").value
????rs.MoveNext();
}
//escape解决了XMLHTTP。中文处理的问题.
Response.Write(escape(sResult.join("###")));
%>


数据库data.mdb
表 nums
id,自动编号
num1,文本
num2,文本

测试数据

id      num1    num2
1       20.70   20.810
2       10.5    20.5
3       12.3    300
4       132     323
5       563     56
6       20      10


来源:  作者:
点击数: | 回复数: | 时间:2007-11-2 11:43:15
发起辩论 收藏到我的网摘  
共有评论 
快速回复
游客身份发表,或者输入大名:
支持HTML语法,限250字内 
     
请根据下图中的字符输入验证码:
Powered by pwmis.com  技术支持