ajax實現定時從伺服器獲取資料

admin發表於2017-02-10
本章節介紹一下如何實現使用ajax定時從伺服器獲取資料。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function saveUserInfo() {
  //獲取接受返回資訊層  
  var cdown = document.getElementById("cdown");
  //alert(cdown);
 
  //接收表單的URL地址  
  var url = "word.php";
 
  var ajax = false;
  //開始初始化XMLHttpRequest物件  
  if (window.XMLHttpRequest) {   //Mozilla 瀏覽器  
    ajax = new XMLHttpRequest();
    if (ajax.overrideMimeType) {   //設定MiME類別  
      ajax.overrideMimeType("text/xml");
    }
  }
  else if (window.ActiveXObject) {   // IE瀏覽器  
    try {
      ajax = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) { }
    }
  }
  if (!ajax) {   // 異常,建立物件例項失敗  
    window.alert("不能建立XMLHttpRequest物件例項.");
    return false;
  }
 
  //通過Post方式開啟連線  
  ajax.open("GET", url, true);
 
  //定義傳輸的檔案HTTP頭資訊  
  //ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
 
  ajax.setRequestHeader("If-Modified-Since", "0");
  //傳送POST資料  
  ajax.send(null);
 
  //獲取執行狀態  
  ajax.onreadystatechange = function () {
    //如果執行狀態成功,那麼就把返回資訊寫到指定的層裡  
    if (ajax.readyState == 4 && ajax.status == 200) {
      cdown.innerHTML = ajax.responseText;
    }
  }
}
function doUpdate() {
  saveUserInfo();
  window.setTimeout("doUpdate()", 8000);
}
doUpdate();

上面的程式碼非常簡單,不用多介紹,這裡只是做了一個原理上的說明。

程式碼的核心部分就是:

[JavaScript] 純文字檢視 複製程式碼
function doUpdate() {
  saveUserInfo();
  window.setTimeout("doUpdate()", 8000);
}
doUpdate();

呼叫doUpdate()函式之後,通過saveUserInfo()執行可以獲取到伺服器的資料。

然後在8秒之後再遞迴呼叫doUpdate(),如此反覆不斷的實現獲取。

相關文章