XMLHTTP无刷新自动实时更新数据

有种安心叫幸福

有种安心叫幸福

2016-02-19 18:37

下面图老师小编要向大家介绍下XMLHTTP无刷新自动实时更新数据,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

  传统上,我们浏览网页,如果加入最新的数据。只能是等我们重新向服务器端请求时才能显示出来。但是,对于一些时效性很强的网站,传统的这种做法是不能满足的。

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

  demo.htm 前台显示.

script language="JavaScript"function GetResult(){/**--------------- GetResult() -----------------* GetResult() * 功能:通过XMLHTTP发送请求,返回结果.* 参数:str,字符串,发送条件.* 实例:GetResult();*--------------- GetResult() -----------------*/var oBao = new ActiveXObject("Microsoft.XMLHTTP");//特殊字符:+,%,&,=,?等的传输解决办法.字符串先用escape编码的.//Update:2004-6-1 12:22oBao.open("POST","Server.asp",false);oBao.send();//服务器端处理返回的是经过escape编码的字符串.var strResult = unescape(oBao.responseText);//将字符串分开.var arrResult = strResult.split("###");RemoveRow(); //删除以前的数据.//将取得的字符串分开,并写入表格中.for(var i=0;iarrResult.length;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;iiRows-1;i++){tb.deleteRow(1);}}function MyShow(){//2秒自动刷新一次,2秒取得一次数据.timer = window.setInterval("GetResult()",2000);}/scriptbody onload="MyShow()"p/ptable width="47%" height="23" border="0" cellpadding="1" cellspacing="0"id="tb"trtdnum1/tdtdnum2/td/tr/table
  Server.asp 后台读取数据

% @Language="JavaScript" %%function OpenDB(sdbname){/**--------------- OpenDB(sdbname) -----------------* OpenDB(sdbname) * 功能:打开数据库sdbname,返回conn对象.* 参数:sdbname,字符串,数据库名称.* 实例:var conn = OpenDB("database.mdb");*--------------- 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:22var 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").Valuers.MoveNext();}//escape解决了XMLHTTP。中文处理的问题.Response.Write(escape(sResult.join("###")));%
数据库data.mdb

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

表 nums

id,自动编号

num1,文本

num2,文本

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

测试数据

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

展开更多 50%)
分享

猜你喜欢

XMLHTTP无刷新自动实时更新数据

Web开发
XMLHTTP无刷新自动实时更新数据

利用XMLHTTP无刷新自动实时更新数据

Web开发
利用XMLHTTP无刷新自动实时更新数据

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

利用XMLHTTP无刷新获取数据

Web开发
利用XMLHTTP无刷新获取数据

AJAX无刷新更新数据

Web开发
AJAX无刷新更新数据

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

利用XMLHTTP无刷新添加数据

Web开发
利用XMLHTTP无刷新添加数据

用Javascript实现无刷新更新数据

Web开发
用Javascript实现无刷新更新数据

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

XSLT轻松入门第一章:XSLT的概念

XSLT轻松入门第一章:XSLT的概念

Atomik 2.0将QuarkXPress转化为XML

Atomik 2.0将QuarkXPress转化为XML
下拉加载更多内容 ↓