Colorful Life2010

无刷新显示即时更新数据两例
Weather:阴天版的三月一号
源作者:http://blog.csdn.net/sunsnow8/archive/2005/01/03/238448.aspx
因最近做网站需要用到无刷新数据,所以在网上查了一些资料,无刷新数据的实现无外乎用javascript或xmlhttp或iframe来实现。在网上找到一代码不是不能用就是效率太低,有的甚至使我的CPU达到100%,我根据网上的代码及查阅了一些资料,提供以下两例无刷新数据的例子,保证完全无错!

例一:
example1.htm
-------------------------------------
<html>
<head>
<title>无刷新</title>

<script language="JavaScript" type="text/javascript">
function GetData(url)
{
        url="example1.asp";//调用页面
        try
        {
                DataLoad.src = url;
        }
        catch(e)
        {
        return false;
        }
        {
        var timeoutid = setTimeout("GetData()",1000)
        }
}
</script>
<script id="DataLoad" language="JavaScript" type="text/javascript" defer></script>

<body  onLoad="javascript:GetData();">
<span id=loadcontent>数据载入中……</span>
</body>
-------------------------------------
数据调用程序:example1.asp
--------------------------------------
loadcontent.innerHTML="<%=now()%>"

例二:
example2.htm
-------------------------------------
<HTML>
<head>
<title>无刷新</title>

<script language="javascript">
function GetData()
{
url="example2.asp";//调用页面

 var http = new ActiveXObject("Microsoft.XMLHTTP");
 http.open("GET",url,false);
 http.send();
 var str = http.responseText;
 loadcontent.innerHTML=str;
 setTimeout("GetData()",1000);
}
</script>

</head>
<BODY onload="javascript:GetData();">
<span id="loadcontent">数据载入中……</span>
</BODY>
</HTML>
-------------------------
数据调用程序:example2.asp
---------------------------
<%=now%>
---------------------------


  以上<%=now%>只是作为简单例子,可千万别误作这只是一个显示时间的程序哦,像在即时比分或者其它需要即时更新的数据中都可以用此二例,只是把<%=now%>换成其它的程序,当然你也可以用php程序或jsp程序等来实现数据的调用。
  我个人觉得以上二例是最简洁、值得推荐的

历史上的今天: [2010/03/01]二月的油菜花

[无刷新显示即时更新数据两例]的回复

Ivan 于 2005-03-01 15:58:40 发表 | IP:210.83.202.*

利用XMLHTTP无刷新获取数据.

客户端和服务器端数据的交互有几种方法.
1.提交,通过<form></form>提交到服务器端.也称"有刷新"吧.
2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.
利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一
些简单的应用.

附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.

client.htm

<script language="JavaScript">
function GetResult(str)
{
/*
 *--------------- GetResult(str) -----------------
 * GetResult(str)
 * 功能:通过XMLHTTP发送请求,返回结果.
 * 参数:str,字符串,发送条件.
 * 实例:GetResult(document.all.userid.value);
 * author:wanghr100(灰豆宝宝.net)
 * update:2004-5-27 19:02
 *--------------- GetResult(str) -----------------
 */

    var oBao = new ActiveXObject("Microsoft.XMLHTTP");
    //特殊字符:+,%,&,=,?等的传输解决办法.字符串先用escape编码的.
    //Update:2004-6-1 12:22

    oBao.open("POST","server.asp?userid="+escape(str),false);
    oBao.send();
    //服务器端处理返回的是经过escape编码的字符串.
    document.all.username.value=unescape(oBao.responseText)
}
</script>
<input type="button" onclick="GetResult(document.all.userid.value)" value="Get"><br>
userid:<input type="text" name="userid"><br>
username:<input type="text" name="username">


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 = "";
var oConn = OpenDB("data.mdb");
//特殊字符:+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的
//所以服务器端先要经过unescape解码.
//Update:2004-6-1 12:22

var userid = unescape(Request("userid"));
var sql = "select username from users where userid='"+userid+"'";
var rs = oConn.Execute(sql);
if(!rs.EOF)
{
    sResult = rs("username").Value;
}
else
{
    //加入容错.2004-5-30 10:15
    sResult = "Sorry,没有找到..."
}
//escape解决了XMLHTTP。中文处理的问题.
Response.Write(escape(sResult));
%>

数据库设计 data.mdb
表users.
字段
id  自动编号
userid  文本
username 文本

表:users 数据:
id userid  username
1 wanghr100 灰豆宝宝.net

Ivan 于 2005-03-02 23:39:02 发表 | IP:218.25.128.*
http://dev2dev.bea.com.cn/techdoc/other/2005020504.html
Post a Comment~