无刷新实时获得数据

我们可以让程序自动刷新.定时向服务器请求数据.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" οnclick="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,后来时间戳帮助我们解决了问题。 时间戳的强大功能,时间戳在许多时候我们可以巧妙的利用。

 

 

 

注意!此信息未认证,请谨慎判断信息的真实性!

全部评论
空

相关内容推荐

头像
点赞 评论 收藏
转发
头像
2022-12-20 00:05
门头沟学院_2023
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
2022-12-23 17:45
武汉商学院_2023
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
2022-12-10 09:46
宁夏大学_2023
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
2022-12-16 02:48
门头沟学院_2022
点赞 评论 收藏
转发
点赞 收藏 评论
分享

全站热榜

正在热议