您的位置: 首页  >  IT文章  >  无刷新实时取得数据

无刷新实时取得数据

分类: IT文章 • 2023-10-28 22:49:11
无刷新实时获得数据

我们可以让程序自动刷新.定时向服务器请求数据.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: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 >
<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

 

 

用js+webservice实现无刷新,动态查询数据库阿

例子:
页面： 
  <INPUT type="button" value="Button" onclick="getdata()"><br>
  <span id="div1" class="list"></span>
   <script language=javascript>
     setInterval(getdata,1000); //动态定时调用
   </script>
脚本：
   <SCRIPT ID="clientEventHandlersJS" LANGUAGE="javascript">
  function getdata()
  {
    var index=0;   
    docSubmit =new ActiveXObject("Microsoft.XMLDOM");
    docSubmit.async = false;   
    docSubmit.load("http://localhost/WebApplication1/Service1.asmx/GetData?max
val=5");   
    docSubmit.loadXML(docSubmit.xml.replace(/&lt;/g,"<").replace(/&gt;/g,">"))
;
       
    var s="";  
    nodeList=docSubmit.documentElement.getElementsByTagName("ds");
    for (i=0;i<nodeList.length;i++)
    {
     s=s+nodeList(i).selectSingleNode("KeShimch").text+'<br>';
    }
    div1.innerHtml ="";
    div1.innerHTML=s;
    div1.style.visibility="visible";       
  }    
  </script>
 
注意：
我试了一下,问题在fromework1.0和1.1是有区别的,
在1.1的 machine.config （C:\WINNT\Microsoft.NET\Framework\v1.1.4322\CONFIG）,默
认webservice去除了post,get方法
你可在你的 machine.config 中加上 或者 只在 webServices 项目的 Web.config 的<sy
stem.web>里加上：
<webServices>
     <protocols>
       <add name="HttpPost" />
       <add name="HttpGet" />
     </protocols>
</webServices>
否则，在ie地址栏输入 webServices 访问地址串时，提示：请求格式无法识别。

还有
docSubmit = new ActiveXObject("MSXML2.DOMDocument");  //1.0
换成
docSubmit =new ActiveXObject("Microsoft.XMLDOM");  //1.1
－－－－－－－－－－－－－－－－－－－－－－－－－－
web服务方法：
  [WebMethod]
  public string GetData(string maxval)
  {   
   BaseClass.DbManagerSql dbm=new BaseClass.DbManagerSql();
   string strSql="select * from s_KeShi where Keshidm>"+maxval;
   DataSet ds=dbm.Query(strSql);
   return ds.GetXml();
  }
返回的xml数据：
  <?xml version="1.0" encoding="utf-8" ?> 
  <string xmlns="http://tempuri.org/">
<NewDataSet> 
<ds> <KeShidm>6</KeShidm> <KeShimch>财务部</KeShimch> </ds> 
<ds> <KeShidm>7</KeShidm> <KeShimch>政工部</KeShimch> </ds>
<ds> <KeShidm>8</KeShidm> <KeShimch>安质部</KeShimch> </ds> 
<ds> <KeShidm>9</KeShidm> <KeShimch>电管部</KeShimch> </ds> 
<ds> <KeShidm>10</KeShidm> <KeShimch>运输公司</KeShimch> </ds> 
<ds> <KeShidm>11</KeShidm> <KeShimch>局长</KeShimch> </ds>
<ds> <KeShidm>202</KeShidm> <KeShimch>青宁变电站</KeShimch></ds> 
</NewDataSet>
</string>

使用FusionCharts的报表工具，动态获取数据，想定时获取新的数据又刷新页面，使用了jquery但是每次都刷新页面。下面是我的代码，应该如何修改呀

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>FusionCharts v3 Documentation</title>

<script language="JavaScript" src="JSClass/FusionCharts.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
setInterval(refreshMeetInfo, 5000);
});

$(function refreshMeetInfo()  {

var queryStr={};

$.ajax({  
        type: "post",
        url: "data.jsp",
        data: queryStr,  
        dataType: "text",
        success: callback
    });
   
    function callback(data){  
     var chart = new FusionCharts("Charts/MSColumn2D.swf", "chart1Id", "800", "600", "0", "0");  
     chart.setDataXML(data);
     chart.render("chartDiv");
}  

});
</script>

</head>

<body>
<table width="70%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
     <td valign="top" class="text" align="center">
     <div id="chartdiv" align="center"></div>
</td>
</tr>
</table>

</body>
</html>

 

FusionCharts V3产生的图表自动进行刷新，内容刷新，不是整个swf区域刷新

http://diqigan.iteye.com/blog/774366

 

 

FusionCharts 的刷新

  配置数据源的方式有很多种，这里举一个例子：

view plaincopy to clipboardprint?
<html>     
    <head>     
    <META HTTP-EQUIV="pragma" CONTENT="no-cache"/> 
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"/> 
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"/> 
    <META HTTP-EQUIV="expires" CONTENT="0"/> 
        <script language="JavaScript" src="../chart/JSClass/FusionCharts.js" mce_src="chart/JSClass/FusionCharts.js"></script>     
    </head>       
<body bgcolor="#ffffff">     
    <div id="chartdiv" style= "float:left"></div    <script type="text/javascript"><!--  
     
        var myChart = new FusionCharts("../chart/Charts/Column3D.swf", "chartid", "360", "230","0","1");      
        myChart.setDataURL("DataDemo.xml" + "?t="+ new Date().getTime());   
        myChart.render("chartdiv");      
      
// --></script>    
</body>     
</html>   
<html>  
    <head>  
    <META HTTP-EQUIV="pragma" CONTENT="no-cache"/>
 <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"/>
 <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"/>
 <META HTTP-EQUIV="expires" CONTENT="0"/>
        <script language="JavaScript" src="../chart/JSClass/FusionCharts.js" mce_src="chart/JSClass/FusionCharts.js"></script>  
    </head>    
<body bgcolor="#ffffff">  
    <div id="chartdiv" style= "float:left"></div    <script type="text/javascript"><!--
  
        var myChart = new FusionCharts("../chart/Charts/Column3D.swf", "chartid", "360", "230","0","1");   
        myChart.setDataURL("DataDemo.xml" + "?t="+ new Date().getTime());
        myChart.render("chartdiv");   
   
// --></script> 
</body>  
</html>  

    

    

    Flash图表无法刷新，开始以为是脚本的bug，后来时间戳帮助我们解决了问题。 时间戳的强大功能，时间戳在许多时候我们可以巧妙的利用。

 

 

 

相关推荐