利用Ajax生成ProgressBar:实现同类大批量数据批量生成Html,并实时显示进度条，可查看处理日志

<!--
/*「AjaxProgressBar」 JavaScript Document   For details
   ==========================================================
   程序制作: 狼之舞(c) 2009-2019
   制作日期: 2009年06月08日
   联系方式：QQ-63858288
     MSN：[email protected]
    
   有关详情，请联系狼之舞 
   转载请注明出处并保留本说明
   ----------------------------------------------------------
   Powered by·Dancewolf(c) 2009-2019
   Technical Support:
    Tencent QQ:63858288
    E-mail:[email protected],[email protected]
   For details, please contact Dancewolf
   Reprint please indicate the source and to retain this note  
   ==========================================================
*/
//*==============================================================================*/
//*                                                                              */
//* 功能：实现同类大批量数据批量生成Html,并实时显示进度条，可查看处理日志        */
//*                                                                              */
//* 语法：var progressBar=new AjaxProgressBar()                                  */
//*    progressBar.initialize(doAction,logAction,instance[,parentNode])       */
//*                                                                              */
//* 参数：                                                                       */
//*      -doAction    [必需的]  执行URL                                          */
//*      -logAction   [必需的]  进度XML                                          */
//*      -instance    [必需的]  实例对像名称                                     */
//*      -parentNode  [可选的]  显示进度条的容器ID，如缺省不能批量调用。         */
//*                                                                              */
//* 使用条件：                                                                   */
//*      需要doAction不断生成logAction, logAction文件格式如下：                  */
//*      <root><log progress="0%"  success="" fail=""></log></root>              */
//*                                                                              */
//*==============================================================================*/
function AjaxProgressBar(){
 /*---------------------------------------------------------------------------*/    
 function InitAjax(){
  var Ajax=false;
  /*Microsoft*/
  try {
     Ajax = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
     try {
     Ajax = new ActiveXObject("Microsoft.XMLHTTP");
     }catch (E) {
     Ajax = false;
     }
  }/*Mozilla*/
  if (!Ajax && typeof Ajax!='undefined') {
     Ajax = new XMLHttpRequest();
  }
   return Ajax;
 }
 /*---------------------------------------------------------------------------*/    
 /*   判断函数或对像是否存在  一定要添加try catch块，否则不起作用             */
 /*                                                                           */
 /* Javascript 的 typeof可以获取变量的类型,有如下6种返回值：                  */
 /* 1）number；                                                               */
 /* 2）string；                                                               */
 /* 3）boolean；                                                              */
 /* 4）object；                                                               */
 /* 5）function；                                                             */
 /* 6）undefined.                                                             */
 /*---------------------------------------------------------------------------*/    
 function objExists(objName){
  try{ 
   if(typeof eval(objName)=="undefined"){return false;}
   if(typeof eval(objName)=="object"){return true;}
  }catch(e){
   return false;
  }
 }
 function funExists(funName){
  try{ 
   if(typeof eval(funName)=="undefined"){return false;} 
   if(typeof eval(funName)=="function"){return true;}
  }catch(e){
   return false;
  }
 } 
 /*---------------------------------------------------------------------------*/   
 var instance="";
 var doAction="";
 var logAction="";
 var parentNode=null; 
 
 var btnStart=null;
 var btnAbort=null;
 var btnViews=null;
 var ProgressBarValue=null;
 var ProgressBarTitle=null; 
 
 var isCreate=false;
 var logTimer= null; 
 var logAjax = new InitAjax(); 
 var barAjax = new InitAjax(); 
 /*---------------------------------------------------------------------------*/ 
 this.initialize=function(_doAction,_logAction,_instance,_parentNode){
  try{
   if(isCreate){return false;}   
   instance=_instance;
   doAction=_doAction;
   logAction=_logAction;
   parentNode= document.getElementById(_parentNode); 
   
            if(doAction==null||doAction==""){alert("缺少 执行动作参数:doAction");return false;}
            if(logAction==null||logAction==""){alert("缺少 日志动作参数:logAction");return false;}    
   if(!objExists(instance)){ alert(instance+" 实例对像不存在");return false; }   
   if(parentNode){ batchMode();}else{singlemode();}
   AddEvent(instance);
   isCreate=true; 
  }catch(e){
      alert("初始化出错！");
  }
 }
 /*---------------------------------------------------------------------------*/ 
 this.Start=function(){
  btnStart.disabled=true;
  btnAbort.disabled=false;
  btnViews.disabled=true;
  try{
   barAjax.open("GET",doAction, true);
   barAjax.onreadystatechange =function(){
    /*
    0 请求未初始化（在调用 open() 之前）
    1 请求已提出（调用 send() 之前）
    2 请求已发送（这里通常可以从响应得到内容头部）
    3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
    4 请求已完成（可以访问服务器响应并使用它）
    */  
    if(barAjax.readyState==3){
     try{
     logTimer=window.setInterval(instance+".setProgress()",1000);
     //eval(instance+".setProgress();");
     }catch(e){
     alert(e)
     }
    }else if(barAjax.readyState==4){
     if(barAjax.status == 200){
     //clearInterval(logTimer);
     }else if(barAjax.status == 404){
     btnStart.disabled=true;
     btnAbort.disabled=true;
     btnViews.disabled=true; 
     clearInterval(logTimer);
     alert("执行文件不存在！！！");     
     }else{
     btnStart.disabled=true;
     btnAbort.disabled=true;
     btnViews.disabled=true; 
     clearInterval(logTimer);
     alert("系统出错:"+barAjax.status+",请与管理员联系！");     
     }      
    }  
   };
   barAjax.setRequestHeader("Accept-charset","gb2312");
   barAjax.setRequestHeader("If-Modified-Since","0");  //禁止缓存
   barAjax.send(null); 
  }catch(e){
   alert("执行出错："+e)
  }    
 }
 /*---------------------------------------------------------------------------*/ 
 this.Abort=function(){
  try{
   barAjax.abort(); 
   clearInterval(logTimer);
   btnStart.disabled=false;
   btnAbort.disabled=true;
   btnViews.disabled=false;   
  }catch(e){
   alert("终止失败："+e)
  }    
 }
 /*---------------------------------------------------------------------------*/ 
 this.Views=function(){
  window.open(logAction,"winLog","");
 } 
 /*---------------------------------------------------------------------------*/ 
 this.setProgress=function(){
  try{
   logAjax.open("GET",logAction, true);
   logAjax.onreadystatechange =function(){
    if(logAjax.readyState == 4){
     if(logAjax.status == 200){
      var xmlDOM = logAjax.responseXML;
      var progress=xmlDOM.getElementsByTagName("log")[0].getAttribute("progress");
      ProgressBarValue.style.width=progress;
      ProgressBarTitle.innerHTML=progress;
      if(progress=="100%"){
       clearInterval(logTimer);
       btnStart.disabled=true;
       btnAbort.disabled=true; 
       btnViews.disabled=false; 
      }     
     }else if(logAjax.status == 404){      
      alert(logAction+"文件不存在,将不能显示进度！");
     }else{
      alert("系统出错:"+logAjax.status+",请与管理员联系！");
     }
    }  
      };   
   logAjax.setRequestHeader("Accept-charset","gb2312");
   logAjax.setRequestHeader("If-Modified-Since","0");  //禁止缓存
   logAjax.send(null);
  }catch(e){
     alert("设置进度 出错："+e)
  }
 } 
 /*---------------------------------------------------------------------------*/ 
 function batchMode(){
   /*ProgressBox*/
   var ProgressBox  =document.createElement("div");
   ProgressBox.name="ProgressBox";
   ProgressBox.style.setAttribute("width","420px");    
   ProgressBox.style.setAttribute("marginLeft","auto");
   ProgressBox.style.setAttribute("marginRight","auto");
   /*ProgressBar*/
   var ProgressBar  =document.createElement("div");
   ProgressBar.name="ProgressBar";
   ProgressBar.style.setAttribute("position","relative");    
   ProgressBar.style.setAttribute("padding","1px");
   ProgressBar.style.setAttribute("margin","2px");    
   ProgressBar.style.setAttribute("width","200px");
   ProgressBar.style.setAttribute("height","18px");
   ProgressBar.style.setAttribute("textAlign","left");
   ProgressBar.style.setAttribute("float","left");
   ProgressBar.style.setAttribute("cssFloat","left");
   ProgressBar.style.setAttribute("styleFloat","left");
   ProgressBar.style.setAttribute("backgroundColor","#F5F5F5");
   ProgressBar.style.setAttribute("border","1px solid #000000");                   
   /*---------ProgressBarValue---------*/
   ProgressBarValue  =document.createElement("div");
   ProgressBarValue.name="ProgressBarValue";
   ProgressBarValue.style.setAttribute("position","absolute");    
   ProgressBarValue.style.setAttribute("top","1px");
   ProgressBarValue.style.setAttribute("left","1px");
   ProgressBarValue.style.setAttribute("width","0%");
   ProgressBarValue.style.setAttribute("height","10px");
   ProgressBarValue.style.setAttribute("backgroundColor","#0000FF");
   /*---------ProgressBarTitle---------*/
   ProgressBarTitle  =document.createElement("div");
   ProgressBarTitle.name="ProgressBarTitle";
   ProgressBarTitle.style.setAttribute("position","relative");    
   ProgressBarTitle.style.setAttribute("top","2px");
   ProgressBarTitle.style.setAttribute("left","1px");
   ProgressBarTitle.style.setAttribute("height","18px"); 
   ProgressBarTitle.style.setAttribute("color","#FFCC00");        
   ProgressBarTitle.style.setAttribute("fontSize","10pt");
   ProgressBarTitle.style.setAttribute("textAlign","center");
   ProgressBarTitle.innerHTML="0%"      
   /*---------ProgressTools---------*/
   var ProgressTools  =document.createElement("div");
   ProgressTools.name="ProgressTools";
   ProgressTools.style.setAttribute("width","200px"); 
   ProgressTools.style.setAttribute("marginTop","2px");        
   ProgressTools.style.setAttribute("float","right");
   ProgressTools.style.setAttribute("cssFloat","right");
   ProgressTools.style.setAttribute("styleFloat","right");    
   btnStart  =document.createElement("input");
   btnStart.type ='button';
   btnStart.value=' 开始 ';
   btnAbort =document.createElement("input");
   btnAbort.type ='button';
   btnAbort.value=' 结束 ';
   btnAbort.disabled='disabled';
   btnViews =document.createElement("input");
   btnViews.type='button';
   btnViews.value=' 日志 ';
   btnViews.disabled='disabled'; 
   ProgressTools.appendChild(btnStart);
   ProgressTools.appendChild(btnAbort);
   ProgressTools.appendChild(btnViews);               
   /*                                */
   ProgressBar.appendChild(ProgressBarValue);
   ProgressBar.appendChild(ProgressBarTitle);
   ProgressBox.appendChild(ProgressBar);
   ProgressBox.appendChild(ProgressTools);
   parentNode.appendChild(ProgressBox);  
 }
 /*---------------------------------------------------------------------------*/ 
 function singlemode(){
  if(document.getElementById("ProgressBox")){
   alert("单一模式已经调用，不能重复/n请调用批量模式！");
   return false;
  }
  var outString="<div id='ProgressBox' style='width:420px;height:18px;margin-left: auto;margin-right: auto;'>";
  outString+="<div id='ProgressBar' style='position: relative;padding: 1px;border: 1px solid #000000;margin: 2px;width: 200px;height:18px;background-Color:#F5F5F5;font-size: 9pt;text-align: left;float: left;'>";
  outString+="  <div id='ProgressBarValue'  style='position: absolute;top:1;left:1;background-color: #0000FF;width:0%;height:18px;'></div>";
  outString+="  <div id='ProgressBarTitle'  style='position: relative;top:1;left:1;top:2px;font-size: 10pt;text-align: center; color: #FFCC00'>0%</div>";
  outString+="</div>";
  outString+="<div id='ProgressTools' style='width: 200px;margin-top: 2px;float:right;'>";
  outString+="  <input name='btnStart' type='button' id='btnStart' value=' 开始 ' />";
  outString+="  <input name='btnAbort' type='button' id='btnAbort' value=' 结束 ' disabled='disabled' />";
  outString+="  <input name='btnViews' type='button' id='btnViews' value=' 日志 ' disabled='disabled' />";
  outString+="</div></div>";
  document.write(outString);
  btnStart=document.getElementById("btnStart");
  btnAbort=document.getElementById("btnAbort");
  btnViews=document.getElementById("btnViews");
  ProgressBarValue=document.getElementById("ProgressBarValue");
  ProgressBarTitle=document.getElementById("ProgressBarTitle"); 
 }
 /*---------------------------------------------------------------------------*/ 
 function AddEvent(instance){
  btnStart.onclick=function(){
   try{eval(instance+".Start();");}catch(e){alert(e);} 
  };
  btnAbort.onclick=function(){
   try{eval(instance+".Abort();");}catch(e){alert(e);} 
  };
  btnViews.onclick=function(){
   try{eval(instance+".Views();");}catch(e){alert(e);} 
  };  
 }
 /*---------------------------------------------------------------------------*/ 
}
//*==============================================================================*/
//*                         AjaxProgressBar End                                  */
//*==============================================================================*/
/*                                                                               */
/* 使用笔记：                                                                    */
/*                                                                               */
/* 非IE不支持 document.createElement("<input type='button' value=' 开始 ' />")   */
/*            insertBefore(btnStart,oChildNode)将oChildNode省略                  */
/*                                                                               */
/* 针对 input 在 IE 中 type 属性必须在前，其它属性必须在后           */
/*                                                                               */
/* 关于float                                                                     */
/*   -IE:obj.style.setAttribute("styleFloat","left")|obj.style.styleFloat="left" */
/*   -FF:obj.style.setAttribute("cssFloat","left")|obj.style.cssFloat="left"     */
/*                                                                               */
/*-------------------------------------------------------------------------------*/
-->