أثناء تثبيت التطبيقات وتنزيلها ، أصبح استخدام أشرطة التقدم شائعة جدًا. يمكن استخدام شريط التقدم لتحديد تقدم إكمال المشروع ، ويمكن تمثيله بنسب مئوية أو أرقام ، ويمكن وضعه أفقياً. باستخدام تقنية AJAX لإنشاء أشرطة تقدم ، تصبح الوظيفة أكثر قوة وسريعة.
الآن قم بإنشاء مثيل لإظهار تنفيذ أشرطة التقدم باستخدام تقنية AJAX. يمكن أيضًا تقسيم هذا المثيل إلى رمز العميل ورمز الخادم.
1. رمز الخادم
ينفذ رمز الخادم بشكل أساسي جملة من معلومات طلب العميل ويعيد رقم النسبة المئوية المقابلة. افتح المفكرة وأدخل الكود التالي:
<٪@ page contentType = "text/html ؛ charset = gb2312" language = "java" import = "java.sql.*" errorpage = "" ٪> <٪! Int Counter = 1 ؛ // ملاحظة: سيشارك العديد من المستخدمين هذا المتغير ، وشريط التقدم هذا مناسب فقط للمستخدمين المفردين ٪> <٪ string task = request.getParameter ("Task") ؛ سلسلة الدقة = "" ؛ if (task.equals ("create")) {res = "1" ؛ العداد = 1 ؛ } آخر {string ٪ = "" ؛ التبديل (العداد) {الحالة 1: ٪ = "10" ؛ استراحة؛ الحالة 2: في المئة = "23" ؛ استراحة؛ الحالة 3: في المئة = "35" ؛ استراحة؛ الحالة 4: في المئة = "51" ؛ استراحة؛ الحالة 5: في المئة = "64" ؛ استراحة؛ الحالة 6: في المئة = "73" ؛ استراحة؛ الحالة 7: في المئة = "89" ؛ استراحة؛ الحالة 8: في المئة = "100" ؛ استراحة؛ } counter ++ ؛ res = "<preal>" + ٪ + "</preacs>" ؛ } // printWriter out = response.getWriter () ؛ استجابة. استجابة. out.println ("<s reponse>") ؛ out.println (الدقة) ؛ out.println ("</response>") ؛ out.close () ؛ ٪>احفظ الكود أعلاه مع اسم ProgressBar.jsp. في هذا الملف ، يتم الإعلان عن عداد متغير وتعيين قيمة 1 ، وهو أساس شريط التقدم لإرجاع رقم مئوية. أدناه ، استخدم كائن الطلب للحصول على قيمة المهمة المتغيرة التي يتم نقلها بواسطة العميل. إذا تم إنشاء القيمة ، فهذا يعني أنه يجب إعادة إنشاء شريط التقدم وأن قيمة العداد يتم تعيينها على 1 ؛ إذا لم يتم إنشاء المهمة ، فسيتم إرجاع رقم النسبة المئوية بناءً على قيمة العداد ، وسيتم إكمال العملية ، وسيتم إضافة قيمة العداد إلى 1.
2. رمز العميل
ينفذ رمز العميل لهذا المثال بشكل أساسي حالة شريط التقدم بناءً على رقم النسبة المئوية للعودة. افتح المفكرة وأدخل الكود التالي:
<html> <head> <title> jsp+ajax progress bar </title> <script type = "text/javaScript"> var xmlhttp ؛ var bar_color = 'Blue' ؛ var span_id = "Yellow" ؛ var clear = "" function createxmlhttprequest () {if (window.activexObject) {xmlhttp = new ActiveXObject ("Microsoft.xmlHttp") ؛ } آخر if (window.xmlHttPrequest) {xmlhttp = new xmlhttprequest () ؛ }} function go () {createxmlHttPrequest () ؛ CheckDiv () ؛ var url = "progressBarjsp.jsp؟ task = create" ؛ xmlhttp.open ("get" ، url ، true) ؛ xmlHttp.OnReadyStateChange = gocallback ؛ xmlhttp.send (null) ؛ } الدالة gocallback () {if (xmlHttp.ReadyState == 4) {if (xmlhttp.status == 200) {setTimeOut ("pollserver ()" ، 2000) ؛ }}} pollserver () {createxmlHttPrequest () ؛ var url = "progressBarjsp.jsp؟ task = poll" ؛ xmlhttp.open ("get" ، url ، true) ؛ xmlHttp.OnReadyStateChange = pollcallback ؛ xmlhttp.send (null) ؛ } دالة pollcallback () {if (xmlHttp.ReadyState == 4) {if (xmlHttp.Status == 200) {var ٪_complete = xmlhttp.responsxml.getelementsbytagname ("في المئة") [0] .firstchild.data ؛ var index = ProcessResult (٪_Complete) ؛ لـ (var i = 1 ؛ i <= index ؛ i ++) {var elem = document.getElementById ("block"+i) ؛ elem.innerhtml = clear ؛ elem.style.backgroundColor = bar_color ؛ var next_cell = i + 1 ؛ if (next_cell> index && next_cell <= 9) {document.getElementById ("block" + next_cell) .innerhtml = ٪_complete + "٪" ؛ }} if (index <9) {setTimeOut ("pollserver ()" ، 2000) ؛ } آخر {document.getElementById ("complete"). innerhtml = "تم تحميل الموقع!" ؛ }}}}} دالة ProcessResult (٪_Complete) {var ind ؛ if (٪_complete.length == 1) {ind = 1 ؛ } آخر إذا (٪_complete.length == 2) {ind = ٪_complete.substring (0 ، 1) ؛ } آخر {ind = 9 ؛ } إرجاع ind ؛ } وظيفة checkDiv () {var progress_bar = document.getElementById ("ProgressBar") ؛ if (progress_bar.style.vibility == "مرئية") {clearBar () ؛ document.getElementById ("complete"). innerhtml = "" ؛ } آخر {progress_bar.style.visibility = "مرئي"}} وظيفة clearbar () {for (var i = 1 ؛ i <10 ؛ i ++) {var elem = document.getElementById ("block"+i) ؛ elem.innerhtml = clear ؛ elem.style.backgroundColor = "White" ؛ }}} </script> </head> <body onload = "go () ؛"> <h1 align = center> يتم تحميل الموقع ، يرجى الانتظار </h1> <p> <table align = "center" id = "block2"> </span> <span id = "block3"> </span> <span id = "block4"> </span> <span id = "block5"> </span> <span id = "block6"> </span> <span id = "block7"> </span> <tr> <td align = "center" id = "complete"> </td> </tr> </tbody> </table> </body> </html>احفظ الرمز أعلاه باسم JSPProgressBar.html. في هذا الملف ، يتم استخدام وظيفة JavaScript CreatexMlHttPrequest () بشكل أساسي لإنشاء كائن XmlHttPrequest. تريد وظيفة GO () إرسال طلب غير متزامن على الخادم. يتم استدعاء الوظيفة عند تحميل صفحة الويب. وظيفتها الرئيسية هي إخطار الخادم والبدء في تشغيل شريط التقدم على العميل. تُستخدم وظيفة gocallback () بشكل أساسي لمعالجة استجابة الخادم ، وتدعو وظيفة pollserver () كل ثانيتين. يتم استخدامه أيضًا لإرسال الطلبات غير المتزامنة إلى الخادم ، وطلب بشكل أساسي النسبة المئوية لاستجابة الخادم. تُستخدم وظيفة pollcallback () بشكل أساسي لمعالجة الاستجابات من جانب الخادم ، أي لتحديد حالة عرض شريط التقدم بناءً على الرقم الذي تم إرجاعه بواسطة جانب الخادم. تجدر الإشارة هنا إلى أن وظيفة gocallback () يتم تنفيذها مرة واحدة فقط ، في حين يمكن تنفيذ وظيفة pollcallback () عدة مرات ، والوظائف الثلاث الأخرى هي وظائف مساعدة تنفذ شريط التقدم.
3. الجري
انسخ ملف اثنين أعلاه JSP إلى دليل JSP. عروض التشغيل هي كما يلي: