ajax:改善使用者體驗之進度條

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在最近的一個項目中，有一個上傳功能：上傳一個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);
        }

</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 = "89"; 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映射：

<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()用來上傳檔案和寫庫操作.彼此分工明確.
特此存檔.

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More