• 后台获取数据,动态更新到网页--无闪烁刷新


    用js来控制
    [转贴]
    无闪烁刷新实现的几点要点:

    1,要设置好获得数据的url
    2,要实现数据的调用
    3,要实现数据的无刷新

    先看js是怎样实现的
    以下是lesen的利用js的无刷新 
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript" type="text/javascript">
    <!--关键在这个函数-->
    function GetData(url)
    {
            try
            {
                    DataLoad.src = url;
            }
            catch(e)
            {
                    return false;
            }
    }
    </script>
    <script id="DataLoad" language="JavaScript" type="text/javascript" defer></script>
    </head>

    <body>
    <input type="button" name="Submit" value="请求" onClick="GetData('dataload.aspx')">
    </body>
    </html>
    相信大家也许已经看过这代码,这个是利用onClick事件实现数据库更新加载的
    但是数据调用和自动刷新还没有。

    所以我对这个作了如下修改
    <script language="JavaScript" type="text/javascript">
    function GetData(url)
    {
            url="login1.asp"
            try
            {
                    DataLoad.src = url;
            }
            catch(e)
            {
                    return false;
            }
            {
            var timeoutid = setTimeout("GetData()",2000)
            }
    }
    </script>
    <body>
    <script id="DataLoad" language="JavaScript" type="text/javascript" defer></script>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_callJS(jsStr) { //v2.0
      return eval(jsStr)
    }
    //-->
    </script>

    <body  onLoad="MM_callJS('GetData()')">
    <span id=xx></span>
    </body>

    先解释:
    url="login1.asp"   定义数据url
    var timeoutid = setTimeout("GetData()",2000)  定义GetData()这个的刷新时间

    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_callJS(jsStr) { //v2.0
      return eval(jsStr)
    }
    //-->
    </script>

    <body  onLoad="MM_callJS('GetData()')">
    利用 MM_callJS 这个实现网页下载时加载GetData()
    <span id=xx></span>  调用login1.asp里面的xx数据

    login1.asp 设置如下

    xx.innerHTML="<%=("now")%>"
    }
    这样通过innerHTML我们就能调用数据了。

    此外还有一些实现无刷新的:

    如经典里的文件替换无刷新
    经典里的JS替换文件实现无刷新。 

    <head>
    <script language="javascript">
      var value = "";
      var timeid = null;
      var ready = false;

      function showvalue() {
        ready = false;    
        text.innerHTML = "请稍候……";
        if (scr.src == "1.js") scr.src = "2.js";
        else scr.src = "1.js";
        loadscr();
      }

      function loadscr() {
        if (ready) {
          text.innerHTML = value;
        }
        else {
          clearTimeout(timeid);
          timeid = setTimeout("loadscr();", 10);
        }
      }
      
    </script>
    </head>
    <BODY aLink=#000020 bgColor=#ffffff id=all link=#000020 text=#070155 topMargin=10 vLink=#000020 marginheight="10" marginwidth="10">
    <button type="button" onclick="showvalue();">切换</button>
    <span id="text"></span>
    <script id="scr" language="javascript" src=""></script>
    </body>


    1.js
    value = '这是第1个脚本';
    ready = true;


    2.js

    value = '这是第2个脚本';
    ready = true;


    只要加个定时间刷新 showvalue() 就会自动刷新了。

    还有的就是利用XML
    原理和方法大概和js的一样,只不过XML要求高一点而已

    <SCRIPT language=javascript>
    <!--
    function bar(){
    var oXMLDoc = new ActiveXObject('MSXML');             //创建'MSXML'对象
    sURL = "login.asp"      //获取登陆状态数据的地址
    oXMLDoc.url = sURL;     //load数据
    var oRoot=oXMLDoc.root;     //获取返回xml数据的根节点
    if(oRoot.children != null)  
    {     
    //根据返回的数据在客户端显示
    xx.innerHTML=oRoot.children.item(0).text;       //用户
    yy.innerHTML=oRoot.children.item(1).text;       //时间
    hp.innerHTML=oRoot.children.item(2).text;    //停留
    }
    var timeoutid = setTimeout("bar()",1500)
    }      //每1.5秒重获一次数据,}
    //-->
    </SCRIPT>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_callJS(jsStr) { //v2.0
      return eval(jsStr)
    }
    //-->
    </script>

    <body leftmargin="0" onLoad="MM_callJS('bar()')">
    yy:<span id=xx></span> xx:<span id=yy></span> hp:<span id=hp></span>

    login.asp

    <?xml version="1.0" encoding="gb2312" ?>
    <plan>
    <xx>更改就看到</xx>
    <yy>更改就看到</yy>
    <hp>1112311</hp>
    </plan>

  • 相关阅读:
    BOM:浏览器对象模型
    webStorm 用git上传代码(github)
    flex弹性布局
    面试题(一)
    HTTP协议···(一)
    构造函数
    断点调试
    FCC 高级算法题 库存更新
    FCC 高级算法题 收银机找零钱
    FCC 高级算法题 对称差分
  • 原文地址:https://www.cnblogs.com/xing----hao/p/3391939.html
Copyright © 2020-2023  润新知