1. 程式人生 > >兩種定時重新整理區域性頁面的方法--採用非同步流程

兩種定時重新整理區域性頁面的方法--採用非同步流程

一、採用jQuery的ajax方法

  function reloadView(){
            $.ajax({
                url:'${oneway}/index?event=reloadView',
                type:'POST',
                async:true,    //或false,是否非同步
                success:function(result){

                    //eval() 函式可計算某個字串,並執行其中的的 JavaScript 程式碼。
                    //在這裡是將String轉化為陣列形式
                    var  datas= eval(result);  

                    var accessCountDiv = document.getElementById("accessCount"); //獲取某一個div元素
                    accessCountDiv.innerHTML = ""; //將該Div元素的原有內容清空
                    var accessCount = datas[0]; //獲取陣列第一個內容
                    for(i=0; i<accessCount.length; i++){ //遍歷該陣列
                        var div = document.createElement("div"); //建立一個div元素
                        div.className = "lishi0"; //為該div元素指定class
                        var img = document.createElement("img"); //建立一個img元素
                        img.className = "lishi3-1";
                        img.src = "img/lishi1.png"; //為該img元素指定src屬性
                        var p = document.createElement("p"); //建立一個p元素
                        p.className = "lishi3-2";
                        var txt = document.createTextNode(accessCount[i]); //建立一個文字內容
                        p.appendChild(txt); //將該文字內容插入到p元素中
                        div.appendChild(img); //將img元素插入到div元素中
                        div.appendChild(p);
                        accessCountDiv.appendChild(div); //將這些元素插入到獲取的div元素中
                    }
                },
                error: function (XMLHttpRequest, txtStatus, errorThrown)
                {
                    //alert(XMLHttpRequest + "<br>" + txtStatus + "<br>" + errorThrown);
                }
            });
        }

        /**
        *   設定定時執行
        *   setTimeout(表示式,延時時間)在執行時,是在載入後延遲指定時間後,去執行一次表示式,記住,次數是一次 
        *   setInterval(表示式,互動時間)則不一樣,它從載入後,每隔指定的時間就執行一次表示式 
        */
        setInterval('reloadView()',15000); //每15秒重新整理一次頁面下邊顯示的資料

二、自定義非同步訪問流程

function HttpRequest() { 
} 

HttpRequest.prototype.createXMLHttpRequest = function() {
   var xmlHttp = false;
   if (window.ActiveXObject) {
        var clsids = ["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP.2.6","Microsoft.XMLHTTP.1.0", "Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"]; 
        for(var i = 0; i<=clsids.length; i++){ 
            try {
                xmlHttp = new ActiveXObject(clsids[i]); 
            } catch(e) { 
            //創建出錯,但繼續後面的建立嘗試.. 
            } 
            if(xmlHttp) { 
                break; 
            }
        } 
   } else if (window.XMLHttpRequest) {
      try {
         xmlHttp = new XMLHttpRequest();
      } catch (e) {
         xmlHttp = false;
      }
   }
   return xmlHttp;
};


/**
簡單的封裝了一個ajax請求提交方法,非同步提交
action:url
parameters:url的引數,格式為 "param=123&obj=234&sdf=as",如果為空,則為null
callbackFun:回撥函式
*/
HttpRequest.prototype.simplePost = function(action, parameters, callbackFun) {
   var oRequest = HttpRequest.prototype.createXMLHttpRequest();

   oRequest.open("post", action, true);
   oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=GBK"); 
   if (!parameters) {
      parameters = null;
   }
   oRequest.onreadystatechange = function() {
      if(oRequest.readyState == 4) {
         if(oRequest.status == 200) {
            if (callbackFun) {
                callbackFun(oRequest.responseText);
            }
         }
      }
   }
   oRequest.send(parameters);
};


/**
簡單的封裝了一個ajax請求提交方法,同步提交
action:url
parameters:url的引數
返回:服務端返回的結果
*/
HttpRequest.prototype.simpleSynPost = function(action, parameters) {
   var oRequest = HttpRequest.prototype.createXMLHttpRequest();

   oRequest.open("post", action, false);
   oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=GBK"); 
   if (parameters === undefined || parameters === null || parameters.toLowerCase() === "null") {
      parameters = null;
   }
   oRequest.send(parameters);
   if(oRequest.readyState == 4 && oRequest.status == 200) {
       return oRequest.responseText;
   } else {
       return undefined;
   }
};


/**
*   回撥方法
*/
var callBack = function(result){ 
    //eval() 函式可計算某個字串,並執行其中的的 JavaScript 程式碼。
    //在這裡是將String轉化為陣列形式
    var  datas= eval(result);  

    var accessCountDiv = document.getElementById("accessCount"); //獲取某一個div元素
    accessCountDiv.innerHTML = ""; //將該Div元素的原有內容清空
    var accessCount = datas[0]; //獲取陣列第一個內容
    for(i=0; i<accessCount.length; i++){ //遍歷該陣列
        var div = document.createElement("div"); //建立一個div元素
        div.className = "lishi0"; //為該div元素指定class
        var img = document.createElement("img"); //建立一個img元素
        img.className = "lishi3-1";
        img.src = "img/lishi1.png"; //為該img元素指定src屬性
        var p = document.createElement("p"); //建立一個p元素
        p.className = "lishi3-2";
        var txt = document.createTextNode(accessCount[i]); //建立一個文字內容
        p.appendChild(txt); //將該文字內容插入到p元素中
        div.appendChild(img); //將img元素插入到div元素中
        div.appendChild(p);
        accessCountDiv.appendChild(div); //將這些元素插入到獲取的div元素中
    }
} 


/**
*   呼叫非同步方法
*   單獨寫出來,是因為param是null,一個簡單的封裝
*/
function reload(){
    var param = null;
    HttpRequest.prototype.simplePost("${oneway}/index?event=reloadView", param, callBack); 
}


/**
*   設定定時執行
*   setTimeout(表示式,延時時間)在執行時,是在載入後延遲指定時間後,去執行一次表示式,記住,次數是一次 
*   setInterval(表示式,互動時間)則不一樣,它從載入後,每隔指定的時間就執行一次表示式 
*/
setInterval("reload()", 15000); //每15秒重新整理一次頁面下邊顯示的資料