ไม่ใช่เรื่องยากนักที่จะรับรู้ถึงการแสดงแถบความคืบหน้าโดยไม่ต้องรีเฟรชหน้าในหน้าเว็บ แต่หากแถบความคืบหน้าสามารถสะท้อนถึงธุรกรรมปัจจุบันหรือความคืบหน้าในการดำเนินการตามตรรกะที่ซับซ้อนได้อย่างแม่นยำ นั่นก็ไม่ใช่เรื่องง่าย เทคโนโลยี AJAX ได้รับความนิยม ดังนั้น ผู้เขียนบทความนี้จึงพยายามใช้ AJAX เพื่อให้เห็นแถบความคืบหน้าที่แม่นยำของหน้าเว็บเพื่อดึงดูดผู้อ่าน
ก่อนอื่น คุณควรคิดถึงปัญหา หากธุรกรรมที่ซับซ้อนหรือตรรกะทางธุรกิจไม่ได้รันในลักษณะเธรด เป็นไปไม่ได้ที่จะข้ามธุรกรรมที่ซับซ้อนเพื่อประมวลผลการแสดงความคืบหน้าเมื่อทำงานใน JAVA ดังนั้นจึงเป็นเรื่องปกติสำหรับเรา เพื่อคิดถึงการใช้มัลติเธรดสำหรับธุรกรรมที่ซับซ้อนหรือตรรกะทางธุรกิจ
เมื่อนึกถึงคำถามอื่น การประมวลผลธุรกรรมควรต้องมีชุดข้อมูลพารามิเตอร์บนหน้าเว็บ ดังนั้นจะรับพารามิเตอร์เหล่านี้ได้อย่างไร ดูเหมือนคิดง่าย เพียงส่ง HttpServletRequest
เพื่อแชร์แถบความคืบหน้า การประมวลผลธุรกรรมที่ซับซ้อนทั้งหมดควรใช้อินเทอร์เฟซหรือคลาสนามธรรมเดียวกัน ฉันใช้อินเทอร์เฟซที่นี่ ดังนี้:
อินเทอร์เฟซสาธารณะ IprogressBar {
โมฆะสาธารณะดำเนินการ (คำขอ HttpServletRequest, String pbid); // ดำเนินการธุรกรรมที่ซับซ้อน
-
ใช้คลาสนามธรรมเพื่อใช้แบบมัลติเธรดดังต่อไปนี้:
คลาสนามธรรมสาธารณะ AbstractProgressBar ขยาย TimerTask ใช้งาน IprogressBar {
คำขอ HttpServletRequest ส่วนตัว
pbid สตริงส่วนตัว;
AbstractProgressBar สาธารณะ () {
-
//คลาสย่อยจะต้องแทนที่ฟังก์ชันนี้
โมฆะนามธรรมสาธารณะดำเนินการ (คำขอ HttpServletRequest, String pbid);
โมฆะสาธารณะวิ่ง () {
ดำเนินการ (คำขอ, pbid);
-
setRequest โมฆะสาธารณะ (คำขอ HttpServletRequest) {
this.request=req;
-
โมฆะสาธารณะ setPbid (สตริง pbid) {
นี้.pbid=pbid;
-
-
ไม่สะดวกที่จะระบุรหัสสำหรับโครงการเฉพาะ ที่นี่ฉันเขียนคลาสทดสอบอื่นซึ่งเป็นคลาสที่ดำเนินการประมวลผลธุรกรรมที่ซับซ้อนดังนี้:
TestPB คลาสสาธารณะขยาย AbstractProgressBar {
การดำเนินการเป็นโมฆะสาธารณะ (คำขอ HttpServletRequest, String pbid) {
String sql="insert into temp_table(idx)values(?)";
int pid=จำนวนเต็ม.parseInt(pbid);
ProgressBar pb=แถบความคืบหน้าใหม่ (pid,300,0,1);
//จำลองธุรกรรมขนาดใหญ่
สำหรับ(int i=0;i<300;i++){
DbUtils.executeUpdate (sql, วัตถุใหม่ [] {จำนวนเต็มใหม่ (i)});
//ควบคุมความคืบหน้า
pb.stepIt();
-
-
-
จากนั้นใช้เทคโนโลยี AJAX เพื่อดูแถบความคืบหน้าที่ไม่รีเฟรชของหน้าเว็บ รหัสจะเป็นดังนี้:
<%@ หน้า contentType="text/html;charset=UTF-8"%>
<title>ไม่มีการทดสอบแถบความคืบหน้าในการรีเฟรชหน้า</title>
<สไตล์ประเภท="ข้อความ/css">
-
เนื้อความ {OVERFLOW:scroll;OVERFLOW-X:hidden}
.DEK {ตำแหน่ง:สัมบูรณ์;การมองเห็น:ซ่อน;Z-INDEX:200;}
-
</สไตล์>
<script type="text/javascript">
var xmlHttp;
var pbid;//รหัสแถบความคืบหน้า
ฟังก์ชัน createXMLHttpRequest(){
ถ้า (window.ActiveXObject) {
xmlHttp = ใหม่ ActiveXObject("Microsoft.XMLHTTP");
-
อื่นถ้า (window.XMLHttpRequest) {
xmlHttp = XMLHttpRequest ใหม่();
-
-
ฟังก์ชั่น checkDiv() {
varprogress_bar = document.getElementById("progressBar");
ถ้า (progress_bar.style.visibility != "มองเห็นได้") {
ความคืบหน้า_bar.style.visibility = "มองเห็นได้";
}อื่น
-
ความคืบหน้า_bar.style.visibility = "ซ่อน";
-
-
ฟังก์ชั่นไป () {
createXMLHttpRequest();
checkDiv();
var url = "../servlet/ProgressBarServlet?task=create&impcls=blogcn.pb.imp.TestPB";//โดยที่ blogcn.pb.imp.TestPB เป็นคลาสการใช้งานของธุรกรรมที่ซับซ้อน
ปุ่ม var = document.getElementById("go");
ปุ่มปิดการใช้งาน = จริง;
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("ประเภทเนื้อหา", "text/xml;charset=gb2312");
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
-
ฟังก์ชั่น goCallback(){
ถ้า (xmlHttp.readyState==4)
-
ถ้า (xmlHttp.status==200) {
pbid=xmlHttp.responseXML.getElementsByTagName("pbid")[0].firstChild.data;
setTimeout("โพลเซิร์ฟเวอร์()", 2000);
-
-
-
ฟังก์ชั่น pollServer() {
createXMLHttpRequest();
var url = "../servlet/ProgressBarServlet?task=poll&pbid="+pbid;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = โพลโทรกลับ;
xmlHttp.send(null);
-
ฟังก์ชั่น pollCallback(){
ถ้า (xmlHttp.readyState == 4) {
ถ้า (xmlHttp.status == 200) {
var เปอร์เซ็นต์_สมบูรณ์ =
xmlHttp.responseXML
.getElementsByTagName("เปอร์เซ็นต์")[0].firstChild.data;
ถ้า (เปอร์เซ็นต์_สมบูรณ์ < 100) {
PB1.pos=เปอร์เซ็นต์_สมบูรณ์;
PB1.อัพเดต();
setTimeout("โพลเซิร์ฟเวอร์()", 2000);
} อื่น {
PB1.pos=100;
PB1.อัพเดต();
document.getElementById("go").disabled = false;
-
-
-
}
<input type="button" value="ดำเนินธุรกรรมขนาดใหญ่" id="go" onclick="go();"/>
<DIV id="progressBar">
<ภาษาสคริปต์ = "จาวาสคริปต์">
var PB1=TProgressBar ใหม่("myPB1",220,180,375,20);
PB1.สร้าง();
จำนวนโจรสลัด=100;
PID=โจรสลัดนับ-2;
PB1.เปลี่ยนตำแหน่ง();
PB1.สูงสุด=PID;