استخدم تقنية AJAX لتحقيق عرض شريط التقدم على صفحات الويب دون التحديث

ليس من الصعب جدًا تحقيق عرض شريط التقدم دون تحديث الصفحة في صفحة الويب، ولكن إذا كان شريط التقدم يمكن أن يعكس بدقة المعاملة الحالية أو تقدم تنفيذ المنطق المعقد، فهذه ليست مهمة سهلة تقنية AJAX شائعة، لذلك يحاول مؤلف هذه المقالة استخدام AJAX لتحقيق شريط التقدم الدقيق لصفحة الويب لجذب القراء.
بادئ ذي بدء، يجب أن تفكر في المشكلة. إذا لم يتم تشغيل المعاملات المعقدة أو منطق الأعمال بطريقة مترابطة، فمن المستحيل تخطي المعاملات المعقدة لمعالجة عرض التقدم عند التشغيل في JAVA للتفكير في استخدام مؤشرات الترابط المتعددة للمعاملات المعقدة أو إنجاز منطق الأعمال.
بالتفكير في سؤال آخر، يجب أن تتطلب معالجة المعاملات سلسلة من معلومات المعلمات على صفحة الويب، فكيف يمكن الحصول على هذه المعلمات؟ يبدو هذا أمرًا سهلاً، ما عليك سوى تمرير HttpServletRequest.
من أجل مشاركة شريط التقدم، يجب أن تنفذ جميع عمليات المعالجة المعقدة نفس الواجهة أو الفئة المجردة التي استخدمتها هنا، كما يلي:
الواجهة العامة IprogressBar {
تنفيذ الفراغ العام (HttpServletRequest req، String pbid)؛ // تنفيذ المعاملات المعقدة
}
استخدم فئة مجردة لتنفيذ مؤشرات الترابط المتعددة، على النحو التالي:
فئة مجردة عامة AbstractProgressBar تمتد TimerTask وتنفذ IprogressBar {
طلب HttpServletRequest الخاص؛
سلسلة خاصة pbid؛
شريط التقدم العام (){
}
// يجب أن تتجاوز الفئات الفرعية هذه الوظيفة
تنفيذ الفراغ الملخص العام (HttpServletRequest req، String pbid)؛
تشغيل الفراغ العام () {
تنفيذ (طلب، عرض الأسعار)؛
}
public void setRequest(HttpServletRequest req){
this.request=req;
}
مجموعة الفراغ العام (سلسلة pbid) {
this.pbid=pbid;
}
}
من غير الملائم تقديم رمز لمشروع معين، وقد كتبت هنا فئة اختبار أخرى، وهي فئة تقوم بمعالجة المعاملات المعقدة، على النحو التالي:
الطبقة العامة TestPB تمتد AbstractProgressBar {
تنفيذ الفراغ العام (HttpServletRequest req، String pbid) {
String sql = "insert into temp_table(idx)values(?)";
int pid=Integer.parseInt(pbid);
ProgressBar pb=new ProgressBar(pid,300,0,1);
// محاكاة المعاملات الكبيرة
ل(int i=0;i<300;i++){
DbUtils.executeUpdate(sql,new Object[]{new Integer(i)});
// التحكم في التقدم
pb.stepIt();
}
}
}
ثم استخدم تقنية AJAX لتحقيق شريط التقدم غير المحدث لصفحة الويب، ويكون الرمز كما يلي:
<%@ page contentType="text/html;charset=UTF-8"%>

<title>لا يوجد اختبار لشريط تقدم تحديث الصفحة</title>
<STYLE TYPE="text/css">
<!--
الجسم {التدفق الزائد: التمرير؛ التدفق الفائض-X: مخفي}
.DEK {POSITION:مطلق؛الرؤية:مخفية؛Z-INDEX:200؛}
//-->
</ستايل>
<نوع البرنامج النصي = "نص/جافا سكريبت">
فار xmlHttp;
var pbid;//معرف شريط التقدم
وظيفة createXMLHttpRequest(){
إذا (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
وإلا إذا (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
وظيفة checkDiv () {
varprogress_bar = document.getElementById("progressBar");
إذا (progress_bar.style.visibility != "visible") {
progress_bar.style.visibility = "visible";
}آخر
{
progress_bar.style.visibility = "hidden";
}
}
وظيفة الذهاب () {
createXMLHttpRequest();
checkDiv();
var url = "../servlet/ProgressBarServlet?task=create&impcls=blogcn.pb.imp.TestPB";// حيث blogcn.pb.imp.TestPB هي فئة تنفيذ المعاملات المعقدة
زر var = document.getElementById("go");
Button.disabled = صحيح؛
xmlHttp.open("GET", url, true);
xmlHttp.setRequestHeader("Content-Type", "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("pollServer()", 2000);
}
}
}
وظيفة استطلاع الرأي () {
createXMLHttpRequest();
var url = "../servlet/ProgressBarServlet?task=poll&pbid="+pbid;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = pollCallback;
xmlHttp.send(null);
}
وظيفة PollCallback(){
إذا (xmlHttp.readyState == 4) {
إذا (xmlHttp.status == 200) {
فار بالمائة_كامل =
xmlHttp.responseXML
.getElementsByTagName("percent")[0].firstChild.data;
إذا (percent_Complete <100) {
PB1.pos=percent_complete;
PB1.Update();
setTimeout("pollServer()", 2000);
} آخر {
PB1.pos=100;
PB1.Update();
document.getElementById("go").disabled = false;
}
}
}
}

<input type = "button" value = "تنفيذ المعاملات الكبيرة" id = "go" onclick = "go ()؛"/>
<DIV id="progressBar">
<لغة البرمجة = "جافا سكريبت">
var PB1=new TProgressBar("myPB1",220,180,375,20);
PB1.Create();
PirateCount=100;
PID=PirateCount-2;
PB1.Reposition();
PB1.max=PID;