最近项目中有这样一个需求:
页面动态刷新获取数据库中符合条件的数据的下载链接状态:如果已有可下载链接,就显示链接供用户下载,并显示服务器端当前时间;没有就继续动态获取。
?
?
实现功能:
js取服务器端时间,并动态检索下载链接,显示到页面供用户下载。
?
<script language="javascript"> var xmlhttp = null; var interval = null; var timeTimeout = null; var statusValue = ""; var rtnData = new Array(); var btype; var divContent = ""; /** * 时间对象的格式化; */ Date.prototype.format = function(format){ /* * eg:format="yyyy-MM-dd hh:mm:ss"; */ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond } if(/(y+)/.test(format)) { format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(format)) { format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); } } return format; } function getFile(downUrl){ //alert('** downUrl = <%=path%>/jsp/DataRequest/downloadFile.jsp?downUrl='+ downUrl); window.open("<%=path%>/jsp/DataRequest/downloadFile.jsp?downUrl="+ downUrl); } function getOs(){ var OsObject = ""; if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; //IE浏览器 } if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; //Firefox浏览器 } if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari"; //Safan浏览器 } if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; //Camino浏览器 } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko"; //Gecko浏览器 } } //页面动态调用该函数,动态获取DB中下载链接 function loadXMLDoc(xmlName,dataTypeId){ var ivkUrl = "<%=path%>/jsp/DataRequest/autoFindRtnDataGTS.jsp?xmlName=" + xmlName + "&"+ Math.random(); //alert("** ivkUrl = "+ ivkUrl); if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); }else if (window.ActiveXObject){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp){ xmlhttp.open("GET",ivkUrl,false); btype = getOs(); if(btype != "Firefox"){ xmlhttp.onreadystatechange = state_Change; } xmlhttp.send(null); if(btype == "Firefox"){ updatePageGTS(); } }else{ alert("Your browser does not support XMLHTTP"); } interval = window.setTimeout("loadXMLDoc('<%=xmlName%>','<%=dataTypeId%>')", 10000); //alert("** interval = "+ interval); //0: 等待;2:数据超大;3:无数据;99:数据获取成功 if(statusValue < 0){ window.clearTimeout(interval); }else if(statusValue == 2){ window.clearTimeout(interval); }else if(statusValue == 3){ window.clearTimeout(interval); }else if(statusValue == 99){ window.clearTimeout(interval); } } function state_Change(){ var dataTypeId = "<%=dataTypeId%>"; if (xmlhttp.readyState==4){ if (xmlhttp.status==200){ updatePageGTS(); }else{ //alert("Problem retrieving XML data"); } } } //动态获取下载状态及下载链接地址 function updatePageGTS(){ //alert('updatePageGTS()'); rtnData = eval(xmlhttp.responseText);//获取服务端返回数据(下载链接) if(rtnData[0]){ statusValue = rtnData[0].reqStatus; if(statusValue < 0){ document.getElementById("statusGTS").innerHTML = "<strong>Exception</strong>"; }else if(statusValue == 0){ document.getElementById("statusGTS").innerHTML = "<strong>Being processed</strong>"; }else if(statusValue == 1){ document.getElementById("statusGTS").innerHTML = "<strong>Begin zip</strong>"; }else if(statusValue == 2){ document.getElementById("statusGTS").innerHTML = "<strong>The data you requested is too large</strong>"; }else if(statusValue == 3){ document.getElementById("statusGTS").innerHTML = "<strong>There is no data</strong>"; }else if(statusValue == 99){ document.getElementById("statusGTS").innerHTML = "<strong>The request is processed successfully</strong>"; }else if(statusValue == 100){ document.getElementById("statusGTS").innerHTML = "<strong>Being Zipping</strong>"; }else if(statusValue == -99){ document.getElementById("reqStatus").innerHTML = "<strong>Being Zipping</strong>"; //document.getElementById("reqStatus").innerHTML = "<strong>Zip Error</strong>"; } } for(i = 0; i < rtnData.length; i++){ if(rtnData[i].downUrl){ divContent += '<input id="downloadUrl'+ i +'" type="hidden" name="downloadUrl'+ i +'" value="'+ rtnData[i].downUrl +'" >'; //alert("** divContent = "+ divContent); } } document.getElementById("downUrlHidden").innerHTML = divContent; document.getElementById("downloadUrlSize").value = rtnData.length; //alert("** downUrlHidden = "+document.getElementById("downUrlHidden").innerHTML); //alert("** 下载文件数 = "+ rtnData.length); if(rtnData.length == 1 && rtnData[0].downUrl){//1个下载链接 rtnData[0].downUrl = '\''+ rtnData[0].downUrl +'\''; //alert("下载链接: "+ rtnData[0].downUrl); document.getElementById("downloadUrlGTS").innerHTML = '<a href="#" onclick="getFile('+ rtnData[0].downUrl +')"><legend>Download results</legend></a>'; } if(rtnData.length > 1){//多个下载链接 //alert("** 下载连接数:"+ rtnData.length); document.getElementById("downloadUrlGTS").innerHTML = '<a href="#" onclick="submitForm()"><legend>Download results</legend></a>'; } } function submitForm(){ document.mainform.action= "<%=path%>/jsp/DataRequest/downList.jsp"; document.mainform.submit(); return true; } //获取服务器端时间,计算和客户端时间差,并在客户端显示 function showtime(){ var str = '<%=serverTime%>'; var arr = str.split(" "); var arr1 = arr[0].split("-"); var arr2 = arr[1].split(":"); var cTime = new Date().format("yyyy-MM-dd hh:mm:ss"); var cArr = cTime.split(" "); var cArr1 = cArr[0].split("-"); var cArr2 = cArr[1].split(":"); //alert('服务端时间:<%=serverTime%>'); //alert('客户端时间:'+ cTime); var serverTimes = new Date(arr1[0], arr1[1], arr1[2], arr2[0], arr2[1], arr2[2]); var clientTimes = new Date(cArr1[0], cArr1[1], cArr1[2], cArr2[0], cArr2[1], cArr2[2]); //alert("** arr2[0]: "+ arr2[0] +"| arr2[1]: "+arr2[1] +"| arr2[2]: "+ arr2[2]); //alert("** cArr2[0]: "+ cArr2[0] +"| cArr2[1]: "+cArr2[1] +"| cArr2[2]: "+ cArr2[2]); var diff = (clientTimes.valueOf() - serverTimes.valueOf()); var diffMillions = parseInt(diff,10); //alert("时间差: "+ diffMillions); var currdate = new Date(); currdate.setTime(currdate.getTime() - diffMillions); cTime = currdate.format("yyyy-MM-dd hh:mm:ss"); //alert('time1 = ' + document.getElementById('time1')); document.getElementById('time1').innerHTML = cTime; //alert('time2 = ' + document.getElementById('time2')); document.getElementById('time2').innerHTML = cTime; timeTimeout = window.setTimeout("showtime();", 1000); //设定函数自动执行时间为 1000 ms(1 s) if(statusValue == 2){ window.clearTimeout(timeTimeout); }else if(statusValue == 3){ window.clearTimeout(timeTimeout); } if(statusValue == 99 && divContent){//获取到下载链接 window.clearTimeout(timeTimeout); } } </script> //触发动态刷新 <script language="javascript">showtime();</script> <script language="javascript">loadXMLDoc('<%=xmlName%>','<%=dataTypeId%>');</script>
?