我们可以让程序自动刷新.定时向服务器请求数据.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>
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，后来时间戳帮助我们解决了问题。 时间戳的强大功能，时间戳在许多时候我们可以巧妙的利用。
分享到：
相关推荐
无刷新数据更新是Ajax实现无刷新页面的关键技术。它允许在后台与服务器进行通信，获取或发送数据，然后仅更新页面中的指定部分。例如，一个实时聊天应用，可以通过Ajax实现在不刷新页面的情况下接收到新的消息并显示...
在ThinkPHP框架中，无刷新分页主要依赖于AJAX请求来获取数据，并通过JavaScript处理返回的数据，动态更新页面上的内容。具体步骤如下： 1. **初始化分页对象**：在控制器中创建一个分页对象，设置总记录数、每页...
综上所述，"Gridview无刷新状态例子"项目涉及了Android中数据加载、视图绑定、性能优化等关键技术，旨在提供一个高效的用户界面，使用户在浏览大量数据时能够获得流畅的体验。开发者可以参考这个项目来改进自己的...
综上所述，"php无刷新留言源代码"是一个结合了PHP后端处理、Ajax前端交互和数据库管理的完整系统，旨在提供高效、安全的实时留言功能。开发者通过不断优化和调整，使其在实际项目中得到了广泛应用。
无刷新模糊查询是一种提高用户体验的重要技术，特别是在网页应用和数据检索场景中。它允许用户在输入框中输入关键字时，无需点击搜索按钮或等待页面完全刷新就能得到匹配的建议结果。这种实时反馈使得查找信息更加...
6. **用户体验**：这种无刷新验证极大地提高了用户体验，因为它减少了等待时间，让用户在输入过程中就能得到反馈，避免了无效的注册尝试。 7. **安全性考虑**：虽然Ajax提供了优秀的用户体验，但也需要关注安全问题...
1. **实时更新**：通过Ajax技术，FlyTreeView 可以在后台获取数据并动态更新树形结构，无需用户等待整个页面的刷新，提高了交互性。 2. **层次展现**：树形结构能够清晰地展示数据的层级关系，用户可以轻松地展开或...
本篇文章将详细探讨如何在`.NET`环境下，利用`DropDownList`控件实现下拉菜单的联动效果，并且在用户选择项时，保持页面无刷新。 首先，我们来看`Default.aspx`和`SearchList.aspx`这两个页面。`Default.aspx`通常...
"利用Ajax实现无刷新验证用户名和密码是否正确"这一技术就是为了让用户在输入登录信息时能够得到即时反馈，无需等待页面整体刷新，极大地提升了交互体验。Ajax（Asynchronous JavaScript and XML）是一种创建动态...
### jQuery无刷新分页 1. **AJAX请求**：使用jQuery的`$.ajax`或`$.get`方法向服务器发送异步请求，获取新的数据。当用户点击分页按钮时，触发这个请求，传递当前页码作为参数。 ```javascript $.ajax({ url: '...
通过深入理解并研究“StarDemo”和“StarLike”的源码，开发者不仅可以获得一个现成的无刷新评星控件，还可以学习到AJAX、XML数据处理、自定义ASP.NET控件等相关技术，对于提升自身技能和解决类似问题会有很大帮助。...
在本项目中，我们主要探讨如何使用VC++ 6.0这一经典的编程环境来实现一个功能，即通过腾讯股票实时数据接口获取并显示沪深股市的五档行情数据。五档行情通常包括买一、买二、买三、买四、买五以及卖一、卖二、卖三、...
本文主要讲述了基于Web的无刷新即时通讯设计与实现，使用JavaScript的XMLHttpRequest对象与服务器异步交互得到数据，再用DOM更新页面上的数据从而实现WEB形式无刷新即时通讯。 关键技术点： 1. 使用Ajax异步交互...
无刷新上传技术是现代Web应用中不可或缺的一部分，特别是在处理大量数据或者多媒体文件上传时，能够显著提升用户的满意度。 在UploadFY中，其工作原理基于HTML5的File API和Ajax技术。File API允许浏览器直接访问...
**Ajax无刷新技术详解** Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。...结合前端框架，我们可以更高效地实现Ajax无刷新获取动态页面数据。
最近学习Python进行量化交易，第一步是获取实时行情数据，本资源是从新浪财经API接口获取期货实时行情数据的Python源代码（本代码获得的数据不再仅是5分钟行情数据，而是秒级行情更新，行情刷新间隔视网速及获取品种...
标题中的“AJAX 实时获得数据(来自某一个Servlet)示例”表明我们将创建一个AJAX调用，该调用周期性地询问Servlet，以获取最新的运行状态信息。这可能包括Servlet处理请求的数量、内存使用情况等。 描述中提到，“一...
Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。通过Ajax，用户体验得到显著提升，因为只有需要更新的部分会进行加载，而不是整个页面。jQuery的$....
传统的基于Web的聊天室，为了实现实时更新消息，往往需要频繁地刷新整个页面，这不仅增加了服务器的压力，也严重影响了用户体验。为了解决这些问题，Ajax技术应运而生。 #### 二、Ajax技术的工作原理 Ajax...