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

2024-01-17 15:32

本文主要是介绍利用XMLHTTP无刷新自动实时更新数据.,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前些时间写了几篇关于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 οnlοad="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无刷新自动实时更新数据.的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/616482

相关文章

Java中注解与元数据示例详解

《Java中注解与元数据示例详解》Java注解和元数据是编程中重要的概念,用于描述程序元素的属性和用途,:本文主要介绍Java中注解与元数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参... 目录一、引言二、元数据的概念2.1 定义2.2 作用三、Java 注解的基础3.1 注解的定义3.2 内

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》:本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件,将以下内

将sqlserver数据迁移到mysql的详细步骤记录

《将sqlserver数据迁移到mysql的详细步骤记录》:本文主要介绍将SQLServer数据迁移到MySQL的步骤,包括导出数据、转换数据格式和导入数据,通过示例和工具说明,帮助大家顺利完成... 目录前言一、导出SQL Server 数据二、转换数据格式为mysql兼容格式三、导入数据到MySQL数据

C++中使用vector存储并遍历数据的基本步骤

《C++中使用vector存储并遍历数据的基本步骤》C++标准模板库(STL)提供了多种容器类型,包括顺序容器、关联容器、无序关联容器和容器适配器,每种容器都有其特定的用途和特性,:本文主要介绍C... 目录(1)容器及简要描述‌php顺序容器‌‌关联容器‌‌无序关联容器‌(基于哈希表):‌容器适配器‌:(

C#提取PDF表单数据的实现流程

《C#提取PDF表单数据的实现流程》PDF表单是一种常见的数据收集工具,广泛应用于调查问卷、业务合同等场景,凭借出色的跨平台兼容性和标准化特点,PDF表单在各行各业中得到了广泛应用,本文将探讨如何使用... 目录引言使用工具C# 提取多个PDF表单域的数据C# 提取特定PDF表单域的数据引言PDF表单是一

一文详解Python中数据清洗与处理的常用方法

《一文详解Python中数据清洗与处理的常用方法》在数据处理与分析过程中,缺失值、重复值、异常值等问题是常见的挑战,本文总结了多种数据清洗与处理方法,文中的示例代码简洁易懂,有需要的小伙伴可以参考下... 目录缺失值处理重复值处理异常值处理数据类型转换文本清洗数据分组统计数据分箱数据标准化在数据处理与分析过

大数据小内存排序问题如何巧妙解决

《大数据小内存排序问题如何巧妙解决》文章介绍了大数据小内存排序的三种方法:数据库排序、分治法和位图法,数据库排序简单但速度慢,对设备要求高;分治法高效但实现复杂;位图法可读性差,但存储空间受限... 目录三种方法:方法概要数据库排序(http://www.chinasem.cn对数据库设备要求较高)分治法(常

Python脚本实现自动删除C盘临时文件夹

《Python脚本实现自动删除C盘临时文件夹》在日常使用电脑的过程中,临时文件夹往往会积累大量的无用数据,占用宝贵的磁盘空间,下面我们就来看看Python如何通过脚本实现自动删除C盘临时文件夹吧... 目录一、准备工作二、python脚本编写三、脚本解析四、运行脚本五、案例演示六、注意事项七、总结在日常使用

Python将大量遥感数据的值缩放指定倍数的方法(推荐)

《Python将大量遥感数据的值缩放指定倍数的方法(推荐)》本文介绍基于Python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处理,并将所得处理后数据保存为新的遥感影像... 本文介绍基于python中的gdal模块,批量读取大量多波段遥感影像文件,分别对各波段数据加以数值处

使用MongoDB进行数据存储的操作流程

《使用MongoDB进行数据存储的操作流程》在现代应用开发中,数据存储是一个至关重要的部分,随着数据量的增大和复杂性的增加,传统的关系型数据库有时难以应对高并发和大数据量的处理需求,MongoDB作为... 目录什么是MongoDB?MongoDB的优势使用MongoDB进行数据存储1. 安装MongoDB