ajax進度條 非同步下載進度條
原地址:http://www.sudu.cn/info/index.php?op=article&id=254043
http://topic.csdn.net/u/20080827/11/ad13f57d-2f1c-4c01-9b96-3bb8e8c2e9ab.html
非同步下載
伺服器返回excel檔案的http地址
然後window.open();
或者
<iframe id="download"></iframe>
download.src = excel檔案的http地址;
在最近的一個專案中,有一個上傳功能:上傳一個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");
button.disabled = true;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
function goCallback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setTimeout("pollServer()", 2000);
}
}
}
function pollServer() {
createXMLHttpRequest();
var url = "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.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var progress = document.getElementById("progress");
var progressPersent = document.getElementById("progressPersent");
progress.width = percent_complete + "%";
progressPersent.innerHTML = percent_complete + "%";
if (percent_complete < 100) {
setTimeout("pollServer()", 2000);
} else {
document.getElementById("complete").innerHTML = "Complete!";
//document.getElementById("go").disabled = false;
}
}
}
}
function clearBar() {
var progress_bar = document.getElementById("progressBar");
var progressPersent = document.getElementById("progressPersent");
var complete = document.getElementById("complete");
progress_bar.style.visibility = "visible"
progressPersent.innerHTML = " ";
complete.innerHTML = "Begin to upload this file...";
}
</script>
</head>
<body>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" id="progressPersent">86%</td>
</tr>
<tr >
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000">
<tr>
<td>
<table width="1%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF0000" id="progress">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" id="complete">completed</td>
</tr>
</table>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2:一個模擬servlet:ProgressBarServlet1。java,內容如下:
package com.cyberobject.lcl.ajax;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
/**
*
* @author nate
* @version
*/
public class ProgressBarServlet extends HttpServlet {
private int counter = 1;
/** Handles the HTTP <code>GET</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String task = request.getParameter("task");
String res = "";
if (task.equals("create")) {
res = "<key>1</key>";
counter = 1;
}
else {
String percent = "";
switch (counter) {
case 1: percent = "10"; break;
case 2: percent = "23"; break;
case 3: percent = "35"; break;
case 4: percent = "51"; break;
case 5: percent = "64"; break;
case 6: percent = "73"; break;
case 7: percent = "8Array"; break;
case 8: percent = "100"; break;
}
counter++;
res = "<percent>" + percent + "</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
/** Handles the HTTP <code>POST</code> method.
* @param request servlet request
* @param response servlet response
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/** Returns a short description of the servlet.
*/
public String getServletInfo() {
return "Short description";
}
}
3:在web。xml中配置好servlet對映:
<!-- Action Servlet Mapping -->
<servlet>
<servlet-name>ProgressBarServlet</servlet-name>
<display-name>ProgressBarServlet</display-name>
<servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ProgressBarServlet</servlet-name>
<url-pattern>/ProgressBarServlet</url-pattern>
</servlet-mapping>
此時進度條已經可以執行了。接下來的工作就是把它移植到我們的系統。
二:
1:在寫資料庫的class DbOperater中,增加一個progress屬性
private int progress;
2:在寫資料庫的class中,增加一個getProgress()方法:
public int getProgress()
{
return progress;
}
3: 在寫庫的for迴圈中, progress++;
4:在呼叫DbOperater的servlet中呼叫DbOperater的getProgress()方法,這樣就為進度條提供了實時資料.
5:另外:servlet的doGet()用來獲得進度資料,doPost()用來上傳檔案和寫庫操作.彼此分工明確.
特此存檔.
相關文章
- Linux 進度條(非100%)列出unzip進度Linux
- 【新特性速遞】進度條,進度條,進度條
- Ajax 處理時進度條使用
- HttpWebChilent上傳與下載進度條HTTPWeb
- Python展示檔案下載進度條Python
- Qt 進度條QT
- 簡單進度條
- 學習進度條
- Python進度條技巧Python
- canvas 畫進度條Canvas
- HTML <progress> 進度條HTML
- wkwebView 新增 進度條WebView
- Android花樣loading進度條(三)-配文字環形進度條Android
- pyqt5的下載進度條 實現模板QT
- OSS實現檔案下載進度條顯示
- 製作遊戲載入進度條遊戲
- icp配準進度條
- ProgressBar進度條顏色
- 實現一個協程帶進度條下載器
- Excel實現完成進度的進度條結果Excel
- 【CLI】使用 Curl 下載檔案實時進度條顯示
- LVGL高效顯示進度條
- Python之程式碼進度條Python
- golang 進度條功能實現Golang
- psplash進度條旋轉成功
- Flutter 波浪圓形進度條Flutter
- canvas環形進度條效果Canvas
- 數字進度條元件NumberProgressBar元件
- 橡皮筋進度條ElasticProgressBarAST
- jQuery環形旋轉載入進度條效果jQuery
- 記錄個簡單的進度條同步顯示方法
- 下載速度居然可以這麼快,進度條就靠你拯救了!
- carousel 輪播自定義進度條
- 58python 進度條設計Python
- 關於WPF進度條的使用
- canvas錐形漸變進度條Canvas
- laravel自定義命令列印進度條Laravel命令列
- bat檔案進度條程式碼BAT
- c# 控制檯console進度條C#