在最近的一个项目中,有一个上传功能:上传一个cvs文件,然后解析此文件并写入数据库
由于经常需要传很大的文件,客户完成此功能往往需要40分钟,在这个过程中,页面也没有任何提示,用户体验非常不好?
为何不用ajax作一个进度条呢?
分两步完成此需求:
一:写一个简单的ajax,实现最简单的进度条功能。
二:把此进度条改造为项目可用的进度条。
一:最简单的进度条
1。客户端每2秒发送一个createXMLHttpRequest请求给服务端。并得到服务端返回的进度数据。根据服务端返回的数据,用javascript更新一个table的width,
这样就模拟了一个进度条。
progressBar.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;
function createXMLHttpRequest() …{
if (window.ActiveXObject) …{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) …{
xmlHttp = new XMLHttpRequest();
}
}
function go() …{
createXMLHttpRequest();
clearBar();
var url = "ProgressBarServlet?task=create";
var button = document.getElementById("go");