日期:2014-05-16  浏览次数:20785 次

纯ajax实现的滚动条

? ? ? 这些日子,一直没有调好心态。对于以后究竟是考研,还是努力的工作,我终于下定决心了。先工作,等在IT公司混不下去了,再看看考研的事。之前决定考研是想通过读研来学到更多的东西,进而能拿到更高的工资;经过这段时间发生的一些事,让我明白,我这样一味盲目的追求使我很不幸福,甚至有点像发疯。在社会上更多的是人与人的交流,技术算是次要的……

? ? ? 今天看看还能不能用javascript的原生态去写一点东西(大学里很熟练的哦,工作一年多都成傻逼了)。发现居然还是写出来了。以下分享一下代码:

?1。html界面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
	<head>
		<title>Ajax Progress Bar</title>
		<script type="text/javascript"> 
		       var xmlHttp;
		       var key;
			   var bar_color = 'gray';
			   var span_id = "block";        
			   var clear = "&nbsp;&nbsp;&nbsp;"
			   //创建XMLHttpRequest
			   function createXMLHttpRequest() {
			       if (window.ActiveXObject) {
			          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			        }else if (window.XMLHttpRequest) {            
			          xmlHttp = new XMLHttpRequest();            
			        }        
			   }        
			
			   	//两秒中刷新一次滚动条       
			   	function goCallback() {          
			   	  if (xmlHttp.readyState == 4) {          
			   	      if (xmlHttp.status == 200) {                
			   	          setTimeout("pollServer()", 2000);                
			   	      }            
			   	  }        
			   	}       
			   	 
			   	function pollServer() {         
			   	   createXMLHttpRequest();            
			   	   var url = "servlet/ProgressBarServlet?task=poll&key=" + key;            
			   	   xmlHttp.open("GET", url, true);            
			   	   xmlHttp.onreadystatechange = pollCallback;            
			   	   xmlHttp.send(null);        
			   	}       
			   	//成功时候在界面上刷新滚动条
			   	function pollCallback() {          
			   	  if (xmlHttp.readyState == 4) {            
			   	      if (xmlHttp.status == 200) {                 
			   	         var percent_complete = xmlHttp.responseText;
			   	         //为什么用xmlHttp.responseText获取的服务器返回值会有空格呢
			   	         var index = processResult(percent_complete.trim());   
			   	         for (var i = 1; i <= index; i++) {                        
			   	         	var elem = document.getElementById("block" + i);                        
			   	         	elem.innerHTML = clear;                        
			   	         	elem.style.backgroundColor = bar_color;                        
			   	         	var next_cell = i + 1;                        
			   	         	if (next_cell > index && next_cell <= 9) {                        
			   	         	    document.getElementById("block" + next_cell).innerHTML =percent_complete + "%";                        
			   	         	}                    
			   	         }                    
			   	         if (index < 9) {                     
			   	           setTimeout("pollServer()", 2000);                    
			   	         } else {                     
			   	           document.getElementById("complete").innerHTML = "Complete!";                        
			   	           document.getElementById("go").disabled = false;                    
			   	         }                
			   	      }            
			   	   }        
			   	 }        
			   	 //更加返回结果的第一位数(比如:50,就是5)来确定进度条目前的进展情况。
			   	 function processResult(percent_complete) {          
			   	   var ind;            
			   	   if (percent_complete.length == 1) {              
			   	       ind = 1;            
			   	   } else if (percent_complete.length == 2) {            
			   	       ind = percent_complete.substring(0, 1);            
			   	   } else {              
			   	       ind = 9;            
			   	   }            
			   	   return ind;        
			   	 }        
			   	 
			   	 
			   	 
			   	 function checkDiv() {          
			   	   var progress_bar = document.getElementById("progressBar");            
			   	   if (progress_bar.style.visibility == "visible") {           
			   	        clearBar();