总结一天来学习无闪烁刷新技术

总结一天来学习无闪烁刷新技术,第1张

概述近日要做一个东西。里面就要用到无闪烁刷新技术。本人技术菜,JS不会,ASP会那么一点。所以就找例子去了。现在将所得到的例子转贴并把自己学得贴出来,希望对各位有所帮助。 无刷新实现的几点要点: 1,要设置好获得数...

近日要做一个东西。里面就要用到无闪烁刷新技术。
本人技术菜,Js不会,ASP会那么一点。所以就找例子去了。
现在将所得到的例子转贴并把自己学得贴出来,希望对各位有所帮助。


无刷新实现的几点要点:


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>


好了,该总结的都完了。希望这篇文章能对大家有所帮助。


timeoutID = setTimeout("GetData()",2000)
这个会比价耗资源的
注明:这个贴子只是我的总结,有错误的地方谢谢指出。也欢迎和我交流:23638564
广告时间:www.54nb.com 是个学习技术好地方。哇哈哈哈。

总结

以上是内存溢出为你收集整理的总结一天来学习无闪烁刷新技术全部内容,希望文章能够帮你解决总结一天来学习无闪烁刷新技术所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/langs/1220080.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-05
下一篇 2022-06-05

发表评论

登录后才能评论

评论列表(0条)

保存