两种定时刷新局部页面的方法--采用异步流程

一、采用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秒刷新一次页面下边显示的数据

两种定时刷新局部页面的方法--采用异步流程

猜你喜欢