最近项目中有这样一个需求:
页面动态刷新获取数据库中符合条件的数据的下载链接状态:如果已有可下载链接,就显示链接供用户下载,并显示服务器端当前时间;没有就继续动态获取。
实现功能:
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>