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