兩種定時重新整理區域性頁面的方法--採用非同步流程
阿新 • • 發佈:2018-12-14
一、採用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秒重新整理一次頁面下邊顯示的資料