项目实战(二)后台批量插入数据库，前台进度条显示进度

本功能后台通过List批量插入数据库，前台通过ajax调用，动态显示进度条。

先上传运行截图页面很丑陋，没美工。嵌套bootstrap的进度条。

前台代码：

点击button按钮，进行后台的数据库批量上传

<button οnclick="ass()">导入</button>
	<!-- <a href="#" class="btn btn-danger btn-xs" οnclick="ajax()">进度条</a>-->
		<hr />
<!-- 进度条的显示 -->		
	<div class="progress progress-striped active" id="proges">
        <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
            <span id="proglabel">正在启动，请稍后......</span>
        </div>
    </div>  
</div>

Ajax进行进度条的更新和后台的数据交互：

<script type="text/javascript">
 var t;
 var time = 50;
 var timer_is_on=1;
 function ass(){
 			if(timer_is_on == 1){
 			t=setTimeout(function(){ass()},500);
 			ajax();
 		}else{
 			clearTimeout(t);
 			timer_is_on=1;	
 		}
 	
 }
   function ajax(){
   	
   	var xmlhttp;
   	if (window.XMLHttpRequest)
   	   {// code for IE7+, Firefox, Chrome, Opera, Safari
   	   xmlhttp=new XMLHttpRequest();
   	   }
   	 else
   	   {// code for IE6, IE5
   	   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   	   }
   	xmlhttp.onreadystatechange = function(){
   		if (xmlhttp.readyState==4)
   	    {
   	    	//alert(xmlhttp.status);
   	    	if(xmlhttp.status == 200){
   	    		
   	    		//alert(xmlhttp.responseText+'~~~~');
   	    		if(xmlhttp.responseText == 100){
   	    			$("#prog").removeClass("progress-bar-success").css("width","0%").text("已经成功");
   	    			clearTimeout(t);
   	    			timer_is_on=0;
   	    			
   	    		}
   	    		if(xmlhttp.responseText < 101){
   	    			startProgerss(xmlhttp.responseText);
   	    		}
   	    	}
   	    }
   	}
   	xmlhttp.open("post", "${pageContext.request.contextPath}/progress.action");
   	xmlhttp.send(null);
}
   function reset( ) {
       //value = 0
         $("#prog").removeClass("progress-bar-success").css("width","0%").text("等待启动");
         //setTimeout(increment,5000);
     }

   function startProgerss(value){
    if(value<=100){
       	$("#prog").css("width",value + "%").text(value + "%");
   	 }

       else{
           setTimeout(reset,3000);
           return;
       }
   }
</script>

后台的实现：

后台代码：
后台用的springmvc+mybatis，插入数据库是采用List的批量插入，我们将整个List拆分成100份，注意此时的数据量非常大，百万级。
类中定义的：

//传值的索引
	public static int index;
	
	public static List<Customer> list = null;

后台：

//前台调用更新进度条
	@RequestMapping(value="/progress.action")
	@ResponseBody
	public int progress(HttpServletResponse response,HttpServletRequest request){
		
		if(flag == 1){
			flag = 0;
			insert(null, response, request);
			return index;
		}else{
			return index;
		}
	}
	
	
	//导入功能
	@RequestMapping(value = "/insert.action")
	@ResponseBody
    public void insert(Model model, HttpServletResponse response,HttpServletRequest request) {  
		try {
			
			list = toData.paraseExcel(pathAll);
			//输出文件的路径
			System.out.println(pathAll);
			int length = list.size();
			System.out.println(length);
			int listArray = list.size()/100;
			if(index >=100){
				index = 0;
			}
			//int index=0;
			while(index<100){
	    		if(index<99){
	    			toData.proDisp(list.subList(index*listArray, (index+1)*listArray));
	    			index++;
	    			
	    			
	    		}else{
	    			toData.proDisp(list.subList(index*listArray, list.size()));
	    			index++;
	    			list.clear();
	    			flag = 1;
	    		}
	    		
	    	}
		
			System.out.println("导入ok!");
		
		} catch (Exception e) {
			
			e.printStackTrace();
			
		}
		
		
    }