天天看点
返回

javascript 实现页面局部刷新

初衷是想在一个页面中，只有一小部分需要每隔5秒刷新一次，实现的功能就是每隔5秒读取一个日志，来获取最新的信息。

在php中，刷新整个页面的方法有很多，但局部刷新貌似不大可能（如果这个观点有误，请高手指正）。于是想到了用javascript局部刷新，再调用php的方法。

实现过程如下：

首先是javascript脚本：

     
  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">        
    2.       
  2.  <HTML>        
    3.       
  3.   <HEAD>        
    4.       
  4.    <TITLE> Test </TITLE>        
    5.       
  5.    <META NAME="Generator" CONTENT="EditPlus">        
    6.       
  6.   </HEAD>        
    7.       
  7.  <div id="place">        
    8.       
  8.        abcde         
    9.       
  9.  </div>        
    10.       
  10.  <script>        
    11.       
  11.  var userName;            
    12.       
  12.      var passWord;            
    13.       
  13.      var xmlHttpRequest;            
    14.       
  14.      //XmlHttpRequest对象            
    15.       
  15.    function createXmlHttpRequest(){            
    16.       
  16.          if(window.ActiveXObject){ //如果是IE         
    17.       
  17.              return new ActiveXObject("Microsoft.XMLHTTP");            
    18.       
  18.          }else if(window.XMLHttpRequest){ //非IE浏览器            
    19.       
  19.              return new XMLHttpRequest();            
    20.       
  20.          }            
    21.       
  21.      }            
    22.       
  22.      function onLogin(){            
    23.       
  23.          var url ="http://localhost/sns/js_php.php";         
    24.       
  24.          //1.创建XMLHttpRequest组建            
    25.       
  25.          xmlHttpRequest = createXmlHttpRequest();            
    26.           
  26.          //2.设置回调函数            
    27.       
  27.          xmlHttpRequest.onreadystatechange = HuiDiaoFun;            
    28.           
  28.          //3.初始化XMLHttpRequest组建            
    29.       
  29.          xmlHttpRequest.open("post",url,true);            
    30.           
  30.          //4.发送请求            
    31.       
  31.          xmlHttpRequest.send(null);              
    32.       
  32.      }                 
    33.       
  33.      //回调函数            
    34.       
  34.      function HuiDiaoFun(){            
    35.       
  35.          if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){         
    36.       
  36.              var b = xmlHttpRequest.responseText;         
    37.       
  37.              //alert(b);         
    38.       
  38.              document.getElementById("place").innerHTML = b;         
    39.       
  39.              return b;         
    40.           
  40.          }            
    41.       
  41.      }           
    42.               
  42.  var i=1;         
    43.       
  43.  function changeImg(){         
    44.       
  44.       createXmlHttpRequest();         
    45.       
  45.       onLogin();         
    46.       
  46.       var b = HuiDiaoFun();         
    47.       
  47.      //document.getElementById("tabs").style.background="url('pil"+i+".jpg')";         
    48.           
  48.      i++;         
    49.       
  49.      if(i>5){         
    50.       
  50.      i=1;         
    51.       
  51.      }         
    52.       
  52.      setTimeout("changeImg();","5000");         
    53.       
  53.  }         
    54.           
  54.  </script>        
    55.       
  55.  <BODY onLoad="changeImg();">        
    56.       
  56.   <table style="background:url('pil1.jpg')" width="600" height="400" id="tabs">        
    57.       
  57.  <tr>        
    58.       
  58.  <td></td>        
    59.       
  59.  </tr>        
    60.       
  60.   </table>        
    61.       
  61.  </BODY>        
    62.       
  62.  </HTML>        
    63.
javascript 页面局部刷新
上一篇: 设计模式-单一职责原则
下一篇: 过滤器实栗 登录检测

继续阅读