无刷新实时获得数据
我们可以让程序自动刷新.定时向服务器请求数据.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(/</g,"<").replace(/>/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 的刷新
配置数据源的方式有很多种，这里举一个例子：
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，后来时间戳帮助我们解决了问题。 时间戳的强大功能，时间戳在许多时候我们可以巧妙的利用。