JavaScript-局部刷新

JavaScript-局部刷新

概述

         要实现局部刷新，一般首先是将要刷新的局部内容用一个有确定ID的div标签包起刷新方式一般分为两种定时刷新和事件刷新。本文主要讲解局部刷新原理、事件刷新、局部刷新和局部刷新的推广用法。

 

刷新原理

         刷新主要是通过一个JavaScript函数，和一个网页文件（.php、.html、.asp等）来实现这个

JS函数实现的功能主要是：

1、  通过要刷新的div的ID来锁定被刷新div

2、  指定URL并将指定的URL里面显示的内容显示在被刷新的div上

3、  通过GET通道或者POST通道给指定URL传递参数

（指定的URL一般是一个网页文件 .php、.html、.asp等的路径）

<script type=”text/javascript”>

function loadXMLDoc(){

    var xmlhttp;

if (window.XMLHttpRequest){

          // code for IE7+, Firefox, Chrome, Opera, Safari

         xmlhttp=new XMLHttpRequest();

}else{                           

         // code for IE6, IE5

         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function(){

    if (xmlhttp.readyState==4&& xmlhttp.status==200){

      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}                             // 1、锁定被刷新div

}

xmlhttp.open("GET","/dirname/file.html?a=123&b=456",true);

                // 2、指定URL并将指定的URL里面显示的内容显示在被刷新的div上

                // 3、通过GET通道传参

xmlhttp.send();

}

</script>

用POST通道传递参数请看：

         http://www.w3school.com.cn/tiy/t.asp?f=ajax_post2

         也可参考以下代码

xmlhttp.open("POST","/ajax/demo_post2.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");

 

事件刷新

         事件刷新事实上就是利用了标签的事件属性， 比如<button>的onclick事件，通过这个事件来调用局部刷新的函数如：

<button onclick="loadXMLDoc()">确定</button>

定时刷新

         定时刷新需要用到一个特殊的函数， 这个函数的功能就是经过一段时间后重新执行这个函数

         setTimeout('loadXMLDoc()',2000); 单位是毫秒

下面举个定时刷新的例子

<script type="text/javascript">

    flash_todonum();             // 先执行一次刷新函数

    function flash_todonum(){

        var xmlhttp;

        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari

            xmlhttp=new XMLHttpRequest();

        }else{// code for IE6, IE5

            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

        xmlhttp.onreadystatechange=function(){

            if (xmlhttp.readyState==4&& xmlhttp.status==200){

                document.getElementById("todo_num").innerHTML=xmlhttp.responseText;

            }

        }

        xmlhttp.open("POST","index.php?frame/"+"todo_num",true);

        xmlhttp.send();

        setTimeout('flash_todonum()',2000);  // 两秒后重新执行该函数

    }

</script>

 

推广

    刷新div的URL是可以进行数据处理的， 那么可以利用一个空的div（什么都不显示） 通过事件，传参并进行数据处理

    用jquery（JavaScript）库，会更方便一下，代码简洁一些。