初衷是想在一個頁面中,隻有一小部分需要每隔5秒重新整理一次,實作的功能就是每隔5秒讀取一個日志,來擷取最新的資訊。
在php中,重新整理整個頁面的方法有很多,但局部重新整理貌似不大可能(如果這個觀點有誤,請高手指正)。于是想到了用javascript局部重新整理,再調用php的方法。
實作過程如下:
首先是javascript腳本:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> Test </TITLE>
- <META NAME="Generator" CONTENT="EditPlus">
- </HEAD>
- <div id="place">
- abcde
- </div>
- <script>
- var userName;
- var passWord;
- var xmlHttpRequest;
- //XmlHttpRequest對象
- function createXmlHttpRequest(){
- if(window.ActiveXObject){ //如果是IE
- return new ActiveXObject("Microsoft.XMLHTTP");
- }else if(window.XMLHttpRequest){ //非IE浏覽器
- return new XMLHttpRequest();
- }
- }
- function onLogin(){
- var url ="http://localhost/sns/js_php.php";
- //1.建立XMLHttpRequest組建
- xmlHttpRequest = createXmlHttpRequest();
- //2.設定回調函數
- xmlHttpRequest.onreadystatechange = HuiDiaoFun;
- //3.初始化XMLHttpRequest組建
- xmlHttpRequest.open("post",url,true);
- //4.發送請求
- xmlHttpRequest.send(null);
- }
- //回調函數
- function HuiDiaoFun(){
- if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
- var b = xmlHttpRequest.responseText;
- //alert(b);
- document.getElementById("place").innerHTML = b;
- return b;
- }
- }
- var i=1;
- function changeImg(){
- createXmlHttpRequest();
- onLogin();
- var b = HuiDiaoFun();
- //document.getElementById("tabs").style.background="url('pil"+i+".jpg')";
- i++;
- if(i>5){
- i=1;
- }
- setTimeout("changeImg();","5000");
- }
- </script>
- <BODY onLoad="changeImg();">
- <table style="background:url('pil1.jpg')" width="600" height="400" id="tabs">
- <tr>
- <td></td>
- </tr>
- </table>
- </BODY>
- </HTML>