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

原创 2004年07月23日 16:50:00

前些时间写了几篇关于XMLHTTP运用的实例.
(可以到
http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)

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

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

demo.htm    前台显示.

<script language="JavaScript">
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<arrResult.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;i<iRows-1;i++)
    {
        tb.deleteRow(1);
    }
}

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

<body onload="MyShow()">
<p>
</p>
<table width="47%" height="23"  border="0" cellpadding="1" cellspacing="0" id="tb">
  <tr>
    <td>num1</td>
    <td>num2</td>
  </tr>
</table>


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

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

我们可以让程序自动刷新.定时向服务器请求数据.5秒取一次数据,10秒取一次数据.利用XMLHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据.demo.htm    前台显示.funct...
  • chinmo
  • chinmo
  • 2008-03-04 09:50:00
  • 345

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

传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的. 我们可以让程序自动刷新.定时向服务器请求数据.5秒...
  • bulbul2006
  • bulbul2006
  • 2006-06-07 16:41:00
  • 645

利用XMLHTTP无刷新添加数据之Get篇

利用XMLHTTP无刷新添加数据之Get篇.前两篇主要写了从获取数据.接下来,我们讲讲如何添加数据.我们传统的提交数据的方法都是用来实现的.标记中的Method属性确定了表单元素的数据在发送到服务器时...
  • lee576
  • lee576
  • 2008-01-07 19:55:00
  • 630

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

  • 2008年11月02日 15:45
  • 9KB
  • 下载

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

对于一些...
  • weimaoer
  • weimaoer
  • 2006-12-20 16:32:00
  • 411

无刷新加载页面

无刷新加载页面,提高加载速度,提升用户体验,可实现加载完毕页面入场动画。不用说,要实现无刷新加载肯定是要用到Ajax。原理是只加载一次index(主页),这个主页我们可以理解成一个容器,需要加载新页面...
  • joneeky
  • joneeky
  • 2016-08-01 01:37:26
  • 614

ajax 无刷新实现用户登录

 代码如下:// JScript 文件function usersLogon()...{    var userName = document.getElementById("txtuserName"...
  • xiaotuni
  • xiaotuni
  • 2006-11-15 19:00:00
  • 2159

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

传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的. 我们可以让程序自动刷新.定时向服务器请求数据.5秒...
  • A39033261
  • A39033261
  • 2006-08-26 15:11:00
  • 703

AJAX.net 客户端JS调用服务端事件 UpdatePannel无刷新更新

HTML代码html xmlns="http://www.w3.org/1999/xhtml">head runat="server">    title>Untitled Pagetitle>   ...
  • yjmtv0817
  • yjmtv0817
  • 2007-10-16 17:00:00
  • 507

jquery页面无刷新html加载

年龄                         {{age}}                             $(".childNext").c...
  • zelda002
  • zelda002
  • 2015-01-04 11:25:06
  • 5645
收藏助手
不良信息举报
您举报文章:利用XMLHTTP无刷新自动实时更新数据.
举报原因:
原因补充:

(最多只允许输入30个字)