在网页提交后显示进度条,和使用ajax的例子

我以前作的一个项目，因为提交请求在服务器端执行需要很长时间，大概需要10分多钟，客户总抱怨网页就像死机了一样，在切换到其他页面，重新切换回来时就成了白屏，死机一样，或者客户端干脆什么也干不了，一直没有解决掉现在看看了ajax的东西，做了一个象c/s模式的在提交后页面的出现一个顶层的进度条，显示进度情况。

 刚开始不知道怎么做经过这两天，通过在网上找一些资料，做了一个例子，同时把cu登陆博客时，出现的那个进度条也直接拿过来用了，呵呵，做出来的效果跟真的似的。

以下是网页的源码文件，还有css文件，这个和上次那个是一样的：

 

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>

 marginwidth="0" >
 //对话框的html

 class="id" style="display:none;">
 
  
 
 
  
 

  

提示信息

  

  
  

  

  
     
      
     
    
    

    

    

  

   class="ik" value="确定-" />

  

 //对话框的html



 


  

      >
   10
   35
   50
   0
  
  
  
  

  

  

  
  

   onchange="document.forms['kf'].elements['bi'].selectedIndex=this.selectedIndex;SS(1,'x');RR();">
   10
   35
   50
   0
  

  
  
  


css文件：

td,p,li,input,select,div,span {font-size:12px;}
table,td,img,div,span,form{border: none;margin: 0 0 0 0;padding: 0 0 0 0;}
h1{display:none;}A img{border:none;}A:link {color:#00f;}
A:visited {color:#800080;}
A:active {color:#f00;}
A:hover {color:#f00;}#kh a:link,#kh a:visited,#kh2 a:link,#kh2 a:visited {text-decoration: none;color:#000;}
#kh a:active,#kh a:hover,#kh2 a:active,#kh2 a:hover {text-decoration: underline;color:#f00;}
#kh,#kh2{color:#000;}
#ie{float:left;
padding-top:3px;
font-weight:bold;
padding-left:15px;
width:360px;
cursor:move;
height:20px;
}
.ib{background-color:#000;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:49;
display:none;
filter:alpha(opacity=60);
-moz-opacity:0.6;
}
.id{
position:absolute;
z-index:50;
display:none;
background-color:#fff;
}
.ij{padding:10px 10px 10px 10px;width:370px;text-align:center;line-height:19px;}

 

开始的时候不知道什么原因，总不能正确显示对话框后在才发现原来是css没有设置，看来要在网页里做出一些东西还是要js和css都很熟练才行啊。以前只是做一些后台的东西对这些不懂，看来有时间还是要看看的了。