في المشروع الأخير، كانت هناك وظيفة تحميل: تحميل ملف CVS، ثم تحليل الملف وكتابته في قاعدة البيانات نظرًا لأن الملفات الكبيرة غالبًا ما تحتاج إلى التحميل، فغالبًا ما يستغرق العملاء 40 دقيقة لإكمال هذه الوظيفة العملية، الصفحة أيضًا لا توجد مطالبة وتجربة المستخدم سيئة للغاية؟
لماذا لا تستخدم اياكس لإنشاء شريط التقدم؟
أكمل هذا المتطلب في خطوتين:
الأول: كتابة اياكس بسيط لتنفيذ أبسط وظيفة لشريط التقدم.
الثاني: تحويل شريط التقدم هذا إلى شريط تقدم متاح للمشروع.
1: أبسط شريط التقدم
1. يرسل العميل طلب createXMLHttpRequest إلى الخادم كل ثانيتين ويحصل على بيانات التقدم التي يرجعها الخادم، واستنادًا إلى البيانات التي يعيدها الخادم، استخدم جافا سكريبت لتحديث عرض الجدول.
هذا يحاكي شريط التقدم.
progressBar.html.المحتوى كما يلي:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<الرأس>
<title>شريط تقدم أياكس</title>
<نوع البرنامج النصي = "نص/جافا سكريبت">...
فار xmlHttp;
مفتاح فار؛
الدالة createXMLHttpRequest() ...{
إذا (window.ActiveXObject) ...{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
وإلا إذا (window.XMLHttpRequest) ...{
xmlHttp = new XMLHttpRequest();
}
}
الدالة go() ...{
createXMLHttpRequest();
ClearBar();
var url = "ProgressBarServlet?task=create";
زر var = document.getElementById("go");
Button.disabled = صحيح؛
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = goCallback;
xmlHttp.send(null);
}
الدالة goCallback() ...{
إذا (xmlHttp.readyState == 4) ...{
إذا (xmlHttp.status == 200) ...{
setTimeout("pollServer()", 2000);
}
}
}
وظيفة استطلاع الرأي () ...{
createXMLHttpRequest();
var url = "ProgressBarServlet?task=poll&key=" + key;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
وظيفة PollCallback() ...{
إذا (xmlHttp.readyState == 4) ...{
إذا (xmlHttp.status == 200) ...{
var بالمائة_Complete = xmlHttp.responseXML.getElementsByTagName("percent")[0].firstChild.data;
فار التقدم = document.getElementById("progress");
varprogressPersent = document.getElementById("progressPersent");
progress.width = بالمائة_كامل + "%";
progressPersent.innerHTML = بالمائة_كامل + "%";
إذا (percent_Complete <100) ...{
setTimeout("pollServer()", 2000);
} آخر ...{
document.getElementById("Complete").innerHTML = "Complete!";
//document.getElementById("go").disabled = false;
}
}
}
}
الدالة كليربار () ...{
varprogress_bar = document.getElementById("progressBar");
varprogressPersent = document.getElementById("progressPersent");
فار كامل = document.getElementById("Complete");
progress_bar.style.visibility = "مرئي"
progressPersent.innerHTML = " ";
Complete.innerHTML = "ابدأ بتحميل هذا الملف...";
}
</script>
</الرأس>
<الجسم>
<div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
<عرض الجدول = "300" الحدود = "0" تباعد الخلايا = "0" خلية الحشو = "0" محاذاة = "المركز">
<تر>
<td align="center" id="progressPersent">86%</td>
</tr>
<تر>
<TD>
<عرض الجدول = "100%" الحدود = "1" تباعد الخلايا = "0" خلية الحشو = "0" لون الحدود = "#000000">
<تر>
<TD>
<عرض الجدول = "1%" الحدود = "0" تباعد الخلايا = "0" خلية الحشو = "0" bgcolor = "#FF0000" معرف = "التقدم">
<تر>
<td> </td>
</tr>
</الجدول></تد>
</tr>
</الجدول>
</TD>
</tr>
<تر>
<td align="center" id="complete">اكتمل</td>
</tr>
</الجدول>
</div>
<معرف الإدخال = "go" name = "run" type = "button" value = "run" onClick = "go ()؛">
</body>
</html>
2: servlet المحاكاة: ProgressBarServlet1. جافا، المحتوى هو كما يلي:
package com.cyberobject.lcl.ajax
import java.io.*;
import javax.servlet.*;
استيراد javax.servlet.http.*
/**
*
* @ المؤلف نيت
* @إصدار
*/
الطبقة العامة ProgressBarServlet تمتد HttpServlet {
عداد خاص = 1؛
/** يتعامل مع طريقة HTTP <code>GET</code>.
* @param طلب طلب servlet
* استجابةparam استجابة servlet
*/
doGet باطلة محمية (طلب HttpServletRequest، استجابة HttpServletResponse)
يرمي ServletException، IOException {
مهمة السلسلة = request.getParameter("مهمة");
سلسلة الدقة = ""؛
إذا (task.equals("إنشاء")) {
الدقة = "<key>1</key>";
العداد = 1؛
}
آخر {
نسبة السلسلة = "";
التبديل (العداد) {
الحالة 1: النسبة المئوية = "10"؛
الحالة 2: النسبة المئوية = "23"؛
الحالة 3: النسبة المئوية = "35"؛
الحالة 4: النسبة المئوية = "51"؛
الحالة 5: النسبة المئوية = "64"؛
الحالة 6: النسبة المئوية = "73"؛
الحالة 7: النسبة المئوية = "89"؛
الحالة 8: النسبة المئوية = "100"؛
}
عداد++;
الدقة = "<percent>" + بالمائة + "</percent>";
}
PrintWriter out = Response.getWriter();
Response.setContentType("text/xml");
Response.setHeader("التحكم في ذاكرة التخزين المؤقت"، "no-cache");
println("<response>");
println(res);
println("</response>");
out.Close();
}
/** يتعامل مع طريقة HTTP <code>POST</code>.
* @param طلب طلب servlet
* استجابةparam استجابة servlet
*/
doPost باطلة محمية (طلب HttpServletRequest، استجابة HttpServletResponse)
يرمي ServletException، IOException {
doGet(request, Response);
}
/** إرجاع وصف قصير للخادم.
*/
سلسلة عامة getServletInfo () {
إرجاع "وصف قصير"؛
}
}
3: على شبكة الإنترنت. تكوين تعيين servlet في ملف XML:
<!-- تعيين 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: في فئة DbOperater التي تكتب قاعدة البيانات، قم بإضافة سمة التقدم
التقدم الخاص int
2: في الفصل الذي يكتب قاعدة البيانات، أضف طريقة getProgress():
int public getProgress()
{
تقدم العودة؛
}
3: في حلقة كتابة المكتبة،progress++;
4: قم باستدعاء أسلوب getProgress() الخاص بـ DbOperater في servlet الذي يستدعي DbOperater، وبالتالي توفير بيانات في الوقت الفعلي لشريط التقدم.
5: بالإضافة إلى ذلك: يتم استخدام doGet() الخاص بـ servlet للحصول على بيانات التقدم، ويتم استخدام doPost() لتحميل الملفات وكتابة عمليات المكتبة.
تم أرشفة هذا.