ในโปรเจ็กต์ล่าสุด มีฟังก์ชันการอัปโหลด: อัปโหลดไฟล์ CVS จากนั้นแยกวิเคราะห์ไฟล์และเขียนลงในฐานข้อมูล เนื่องจากมักต้องอัปโหลดไฟล์ขนาดใหญ่ จึงมักใช้เวลา 40 นาทีก่อนที่ลูกค้าจะเสร็จสิ้นฟังก์ชันนี้ กระบวนการ หน้าด้วย ไม่มีการแจ้งเตือนและประสบการณ์ผู้ใช้แย่มาก?
ทำไมไม่ใช้ ajax เพื่อสร้างแถบความคืบหน้าล่ะ?
ปฏิบัติตามข้อกำหนดนี้ในสองขั้นตอน:
หนึ่ง: เขียน ajax แบบง่ายเพื่อใช้ฟังก์ชันแถบความคืบหน้าที่ง่ายที่สุด
สอง: แปลงแถบความคืบหน้านี้เป็นแถบความคืบหน้าสำหรับโครงการ
1: แถบความคืบหน้าที่ง่ายที่สุด
1. ไคลเอ็นต์ส่งคำขอ createXMLHttpRequest ไปยังเซิร์ฟเวอร์ทุกๆ 2 วินาทีและรับข้อมูลความคืบหน้าที่เซิร์ฟเวอร์ส่งคืน ให้ใช้ javascript เพื่ออัปเดตความกว้างของตาราง
นี่เป็นการจำลองแถบความคืบหน้า
ความคืบหน้าBar.htmlเนื้อหาเป็นดังนี้:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<หัว>
<title>แถบความคืบหน้าของอาแจ็กซ์</title>
<script type="text/javascript">...
var xmlHttp;
คีย์ var;
ฟังก์ชั่น createXMLHttpRequest() ...{
ถ้า (window.ActiveXObject) ...{
xmlHttp = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
-
อย่างอื่นถ้า (window.XMLHttpRequest) ...{
xmlHttp = XMLHttpRequest ใหม่();
-
}
ฟังก์ชั่น go() ...{
createXMLHttpRequest();
เคลียร์บาร์();
var url = "ProgressBarServlet?task=สร้าง";
ปุ่ม var = document.getElementById("go");
ปุ่มปิดการใช้งาน = จริง;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
ฟังก์ชั่น goCallback() ...{
ถ้า (xmlHttp.readyState == 4) ...{
ถ้า (xmlHttp.status == 200) ...{
setTimeout("โพลเซิร์ฟเวอร์()", 2000);
-
-
-
ฟังก์ชั่น pollServer() ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + คีย์;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = โพลโทรกลับ;
xmlHttp.send(null);
-
ฟังก์ชั่น pollCallback() ...{
ถ้า (xmlHttp.readyState == 4) ...{
ถ้า (xmlHttp.status == 200) ...{
var เปอร์เซ็นต์_สมบูรณ์ = xmlHttp.responseXML.getElementsByTagName("เปอร์เซ็นต์")[0].firstChild.data;
ความคืบหน้า var = document.getElementById("ความคืบหน้า");
var ProgressPersent = document.getElementById("progressPersent");
ความคืบหน้า.ความกว้าง = เปอร์เซ็นต์_สมบูรณ์ + "%";
ความคืบหน้าPersent.innerHTML =เปอร์เซ็นต์_สมบูรณ์ + "%";
ถ้า (percent_complete < 100) ...{
setTimeout("โพลเซิร์ฟเวอร์()", 2000);
} อื่น ...{
document.getElementById("สมบูรณ์").innerHTML = "เสร็จสมบูรณ์!";
//document.getElementById("go").disabled = false;
-
-
-
-
ฟังก์ชั่น clearBar() ...{
varprogress_bar = document.getElementById("progressBar");
var ProgressPersent = document.getElementById("progressPersent");
var สมบูรณ์ = document.getElementById("สมบูรณ์");
ความคืบหน้า_bar.style.visibility = "มองเห็นได้"
ความคืบหน้าPersent.innerHTML = " ";
complete.innerHTML = "เริ่มต้นการอัพโหลดไฟล์นี้...";
-
</สคริปต์>
</หัว>
<ร่างกาย>
<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="ความคืบหน้า">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</ตาราง>
</td>
</tr>
<tr>
<td align="center" id="complete">เสร็จสมบูรณ์</td>
</tr>
</ตาราง>
</div>
<input id = "go" name="run" type="button" value="run" onClick="go();">
</body>
</html>
2: เซิร์ฟเล็ตจำลอง: ProgressBarServlet1 java มีเนื้อหาดังนี้:
แพ็คเกจ com.cyberobject.lcl.ajax;
นำเข้า java.io.*
;
นำเข้า javax.servlet.http.*
;
-
* @ผู้เขียน เนท
* @รุ่น
-
ProgressBarServlet ระดับสาธารณะขยาย HttpServlet {
ตัวนับ int ส่วนตัว = 1;
/** จัดการเมธอด HTTP <code>GET</code>
* @param ร้องขอเซิร์ฟเล็ต
* การตอบสนองของเซิร์ฟเล็ต @param
-
โมฆะที่ได้รับการป้องกัน doGet (คำขอ HttpServletRequest, การตอบสนอง HttpServletResponse)
พ่น ServletException, IOException {
งานสตริง = request.getParameter("task");
สตริงความละเอียด = "";
ถ้า (task.equals("สร้าง")) {
ความละเอียด = "<คีย์>1</คีย์>";
ตัวนับ = 1;
-
อื่น {
เปอร์เซ็นต์สตริง = "";
สวิตช์ (ตัวนับ) {
กรณีที่ 1: เปอร์เซ็นต์ = "10";
กรณีที่ 2: เปอร์เซ็นต์ = "23";
กรณีที่ 3: เปอร์เซ็นต์ = "35";
กรณีที่ 4: เปอร์เซ็นต์ = "51";
กรณีที่ 5: เปอร์เซ็นต์ = "64";
กรณีที่ 6: เปอร์เซ็นต์ = "73";
กรณีที่ 7: เปอร์เซ็นต์ = "89";
กรณีที่ 8: เปอร์เซ็นต์ = "100";
-
เคาน์เตอร์++;
ความละเอียด = "<เปอร์เซ็นต์>" + เปอร์เซ็นต์ + "</เปอร์เซ็นต์>";
-
PrintWriter ออก = response.getWriter();
response.setContentType("ข้อความ/xml");
response.setHeader("ควบคุมแคช", "ไม่มีแคช");
out.println("<ตอบกลับ>");
out.println(ความละเอียด);
out.println("</ ตอบกลับ>");
ออก.ปิด();
-
/** จัดการเมธอด HTTP <code>POST</code>
* @param ร้องขอเซิร์ฟเล็ต
* การตอบสนองของเซิร์ฟเล็ต @param
-
doPost เป็นโมฆะที่ได้รับการป้องกัน (คำขอ HttpServletRequest, การตอบสนอง HttpServletResponse)
พ่น ServletException, IOException {
doGet (คำขอ, การตอบสนอง);
-
/** ส่งกลับคำอธิบายสั้น ๆ ของเซิร์ฟเล็ต
-
สตริงสาธารณะ getServletInfo() {
กลับ "คำอธิบายสั้น ๆ";
-
-
3: บนเว็บ กำหนดค่าการแมปเซิร์ฟเล็ตใน xml:
<!-- การแมปเซิร์ฟเล็ตการดำเนินการ -->
<เซิร์ฟเล็ต>
<servlet-name>ProgressBarServlet</servlet-name>
<display-name>ProgressBarServlet</display-name>
<servlet-class>com.cyberobject.lcl.ajax.ProgressBarServlet</servlet-คลาส>
</servlet>
<การแมปเซิร์ฟเล็ต>
<servlet-name>ProgressBarServlet</servlet-name>
<url-รูปแบบ>/ProgressBarServlet</url-รูปแบบ>
</การแมปเซิร์ฟเล็ต>
ณ จุดนี้ แถบความคืบหน้าก็พร้อมที่จะทำงานแล้ว ขั้นตอนต่อไปคือการพอร์ตไปยังระบบของเรา
สอง:
1: ในคลาส DbOperater ที่เขียนฐานข้อมูล ให้เพิ่มแอ็ตทริบิวต์ความคืบหน้า
ความคืบหน้า int ส่วนตัว
2: ในคลาสที่เขียนฐานข้อมูล ให้เพิ่มเมธอด getProgress() :
สาธารณะ int getProgress ()
-
กลับความคืบหน้า;
-
3: ใน for loop ของการเขียนไลบรารี, ความคืบหน้า++;
4: เรียกใช้เมธอด getProgress() ของ DbOperater ในเซิร์ฟเล็ตที่เรียกใช้ DbOperater ดังนั้นจึงให้ข้อมูลแบบเรียลไทม์สำหรับแถบความคืบหน้า
5: นอกจากนี้: doGet() ของ servlet ใช้เพื่อรับข้อมูลความคืบหน้า และ doPost() ใช้เพื่ออัปโหลดไฟล์และเขียนการทำงานของไลบรารี การแบ่งงานระหว่างกันมีความชัดเจน
สิ่งนี้ถูกเก็บถาวร