ในระหว่างการติดตั้งและดาวน์โหลดแอปพลิเคชันการใช้แถบความคืบหน้ากลายเป็นเรื่องธรรมดามาก แถบความคืบหน้าสามารถใช้เพื่อระบุความคืบหน้าความสมบูรณ์ของโครงการสามารถแสดงด้วยเปอร์เซ็นต์หรือตัวเลขและสามารถวางในแนวนอนได้ การใช้เทคโนโลยี AJAX เพื่อสร้างแถบความคืบหน้าฟังก์ชั่นจะมีประสิทธิภาพและรวดเร็วยิ่งขึ้น
ตอนนี้สร้างอินสแตนซ์เพื่อแสดงให้เห็นถึงการใช้งานแถบความคืบหน้าโดยใช้เทคโนโลยี AJAX อินสแตนซ์นี้สามารถแบ่งออกเป็นรหัสไคลเอนต์และรหัสเซิร์ฟเวอร์
1. รหัสเซิร์ฟเวอร์
รหัสเซิร์ฟเวอร์ส่วนใหญ่ใช้ประโยคของข้อมูลคำขอไคลเอนต์และส่งคืนหมายเลขเปอร์เซ็นต์ที่สอดคล้องกัน เปิด Notepad และป้อนรหัสต่อไปนี้:
<%@ page contentType = "text/html; charset = gb2312" language = "java" import = "java.sql.*" errorpage = ""%> <%! int counter = 1; // หมายเหตุ: ผู้ใช้หลายคนจะแบ่งปันตัวแปรนี้และแถบความคืบหน้านี้เหมาะสำหรับผู้ใช้รายเดียว%> <% task String = request.getParameter ("งาน"); สตริง res = ""; if (task.equals ("create")) {res = "1"; เคาน์เตอร์ = 1; } else {สตริงเปอร์เซ็นต์ = ""; สวิตช์ (ตัวนับ) {กรณีที่ 1: เปอร์เซ็นต์ = "10"; หยุดพัก; กรณีที่ 2: เปอร์เซ็นต์ = "23"; หยุดพัก; กรณีที่ 3: เปอร์เซ็นต์ = "35"; หยุดพัก; กรณีที่ 4: เปอร์เซ็นต์ = "51"; หยุดพัก; กรณีที่ 5: เปอร์เซ็นต์ = "64"; หยุดพัก; กรณีที่ 6: เปอร์เซ็นต์ = "73"; หยุดพัก; กรณีที่ 7: เปอร์เซ็นต์ = "89"; หยุดพัก; กรณีที่ 8: เปอร์เซ็นต์ = "100"; หยุดพัก; } เคาน์เตอร์ ++; res = "<percent>" + เปอร์เซ็นต์ + "</pent>"; } // PrintWriter out = response.getWriter (); Response.SetContentType ("ข้อความ/xml"); Response.Setheader ("แคชควบคุม", "ไม่มีแคช"); out.println ("<serponse>"); out.println (res); out.println ("</response>"); out.close (); -บันทึกรหัสด้านบนด้วยชื่อ progressbar.jsp ในไฟล์นี้ตัวนับตัวแปรจะถูกประกาศและกำหนดค่า 1 ซึ่งเป็นพื้นฐานสำหรับแถบความคืบหน้าในการส่งคืนหมายเลขเปอร์เซ็นต์ ด้านล่างให้ใช้วัตถุคำขอเพื่อรับค่าของงานตัวแปรที่ส่งโดยไคลเอนต์ หากมีการสร้างค่าหมายความว่าแถบความคืบหน้าจะต้องสร้างขึ้นใหม่และค่าตัวนับถูกตั้งค่าเป็น 1; หากงานไม่ได้สร้างหมายเลขเปอร์เซ็นต์จะถูกส่งคืนตามค่าตัวนับและการดำเนินการจะเสร็จสมบูรณ์และค่าตัวนับจะถูกเพิ่มเป็น 1
2. รหัสลูกค้า
รหัสไคลเอนต์ของตัวอย่างนี้ส่วนใหญ่ใช้สถานะของแถบความคืบหน้าตามหมายเลขเปอร์เซ็นต์ผลตอบแทน เปิด Notepad และป้อนรหัสต่อไปนี้:
<html> <head> <title> jsp+ajax progress bar </title> <script type = "text/javascript"> var xmlhttp; var bar_color = 'blue'; var span_id = "สีเหลือง"; var clear = "" function createxmlhttprequest () {if (window.activexobject) {xmlhttp = new ActivexObject ("Microsoft.xmlhttp"); } อื่นถ้า (window.xmlhttprequest) {xmlhttp = ใหม่ xmlhttprequest (); }} ฟังก์ชั่น go () {createxmlhttprequest (); checkdiv (); var url = "progressbarjsp.jsp? task = create"; xmlhttp.open ("รับ", url, true); xmlhttp.onreadystatechange = gocallback; XMLHTTP.SEND (NULL); } ฟังก์ชั่น gocallback () {ถ้า (xmlhttp.readyState == 4) {ถ้า (xmlhttp.status == 200) {settimeout ("pollserver ()", 2000); }}} ฟังก์ชั่น pollServer () {createxmlhttpRequest (); var url = "progressbarjsp.jsp? task = poll"; xmlhttp.open ("รับ", url, true); xmlhttp.onreadystatechange = PollCallback; XMLHTTP.SEND (NULL); } function pollcallback () {ถ้า (xmlhttp.readyState == 4) {ถ้า (xmlhttp.status == 200) {var percent_complete = xmlhttp.responsexml.getElementsByTagname ("เปอร์เซ็นต์") [0] ดัชนี var = processResult (percent_complete); สำหรับ (var i = 1; i <= index; i ++) {var elem = document.getElementById ("block"+i); elem.innerhtml = ชัดเจน; elem.style.backgroundColor = bar_color; var next_cell = i + 1; if (next_cell> index && next_cell <= 9) {document.getElementById ("block" + next_cell) .innerhtml = percent_complete + "%"; }} ถ้า (ดัชนี <9) {settimeout ("pollServer ()", 2000); } else {document.getElementById ("เสร็จสมบูรณ์"). innerhtml = "เว็บไซต์ได้รับการโหลดแล้ว!"; }}}}} ฟังก์ชั่น processResult (เปอร์เซ็นต์ _complete) {var ind; if (percent_complete.length == 1) {ind = 1; } อื่นถ้า (percent_complete.length == 2) {ind = percent_complete.substring (0, 1); } else {ind = 9; } return ind; } function checkdiv () {var progress_bar = document.getElementById ("progressbar"); if (progress_bar.style.visibility == "มองเห็นได้") {clearbar (); document.getElementById ("เสร็จสมบูรณ์"). innerhtml = ""; } else {progress_bar.style.visibility = "มองเห็นได้"}} ฟังก์ชั่น ClearBar () {สำหรับ (var i = 1; i <10; i ++) {var elem = document.getElementById ("บล็อก"+i); elem.innerhtml = ชัดเจน; Elem.style.backgroundColor = "White"; }} </script> </head> <body onload = "go ();"> <h1 align = center> เว็บไซต์กำลังโหลดโปรดรอ </h1> <p> <table align = "center"> <tbody> <tr> <td> id = "block2"> </span> <span id = "block3"> </span> <span id = "block4"> </span> <span id = "block5"> </span> <span id = "block6"> </span> <span id = "block7"> <tr> <td align = "center" id = "เสร็จสมบูรณ์"> </td> </tr> </tbody> </table> </body> </html>บันทึกรหัสด้านบนด้วยชื่อ jspprogressbar.html ในไฟล์นี้ฟังก์ชัน JavaScript createxmlhttprequest () ส่วนใหญ่ใช้เพื่อสร้างวัตถุ XMLHTTPREQUEST ฟังก์ชั่น GO () ต้องการส่งคำขอแบบอะซิงโครนัสบนเซิร์ฟเวอร์ ฟังก์ชั่นถูกเรียกเมื่อโหลดหน้าเว็บ ฟังก์ชั่นหลักของมันคือการแจ้งเซิร์ฟเวอร์และเริ่มเรียกใช้แถบความคืบหน้าบนไคลเอนต์ ฟังก์ชั่น GOCALLBACK () ส่วนใหญ่ใช้เพื่อประมวลผลการตอบสนองของเซิร์ฟเวอร์และเรียกใช้ฟังก์ชัน PollServer () ทุก 2 วินาที นอกจากนี้ยังใช้เพื่อส่งคำขอแบบอะซิงโครนัสไปยังเซิร์ฟเวอร์ส่วนใหญ่ขอเปอร์เซ็นต์ของการตอบสนองของเซิร์ฟเวอร์ ฟังก์ชั่น PollCallback () ส่วนใหญ่ใช้เพื่อประมวลผลการตอบสนองฝั่งเซิร์ฟเวอร์นั่นคือเพื่อระบุสถานะการแสดงผลของแถบความคืบหน้าตามจำนวนที่ส่งคืนโดยฝั่งเซิร์ฟเวอร์ ควรสังเกตที่นี่ว่าฟังก์ชั่น GOCALLBACK () จะดำเนินการเพียงครั้งเดียวในขณะที่ฟังก์ชั่น PollCallback () สามารถดำเนินการได้หลายครั้งและอีกสามฟังก์ชั่นเป็นฟังก์ชั่นเสริมที่ใช้แถบความคืบหน้า
3. วิ่ง
คัดลอกไฟล์ JSP สองไฟล์ข้างต้นไปยังไดเรกทอรี JSP การเรนเดอร์การดำเนินการมีดังนี้: