首页 > 代码库 > 无刷新实时获得数据

无刷新实时获得数据

2024-07-28 09:45:14   223人阅读

我们可以让程序自动刷新.定时向服务器请求数据.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="http://www.mamicode.com/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="http://www.mamicode.com/JSClass/FusionCharts.js"></script> 
<script type="text/javascript" src="http://www.mamicode.com/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 的刷新

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

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="http://www.mamicode.com/chart/JSClass/FusionCharts.js" mce_src="http://www.mamicode.com/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="http://www.mamicode.com/chart/JSClass/FusionCharts.js" mce_src="http://www.mamicode.com/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，后来时间戳帮助我们解决了问题。 时间戳的强大功能，时间戳在许多时候我们可以巧妙的利用。

无刷新实时获得数据


联系
我们