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

来源：互联网发布：arrival to earth知乎编辑：程序博客网时间：2024/04/20 12:47

一、采用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:urlparameters:url的参数，格式为 "param=123&obj=234&sdf=as"，如果为空，则为nullcallbackFun:回调函数*/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:urlparameters: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秒刷新一次页面下边显示的数据

不过要注意，Jquery的ajax会有跨域访问的问题存在。使用时要小心

0 0