تشارك هذه المقالة ثلاث طرق تحميل غير متزامنة Java للرجوع إليها. المحتوى المحدد كما يلي
تتطلب الطريقة الأولى للتحميل باستخدام مكون إضافي للمتصفح مهارة ترميز أساسية معينة. لن أتحدث عن ذلك هنا ، حتى لا أضلل أطفال الناس. إذا وضعت هذا في الاعتبار ، يمكنك Baidu بمفردك.
يستخدم النوع الثاني iframe مخفيًا لمحاكاة التحميلات غير المتزامنة . لماذا نتحدث عن المحاكاة هنا؟ نظرًا لأننا نضع بالفعل عودة تؤدي إلى iframe خفي ، لذلك لم نقم بإجراء قفزة الصفحة الحالية ، والتي شعرت وكأنها عملية غير متزامنة.
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> ملف تحميل iframe المخفي </title> <script type = "text/javaScript" src = "jquery path ..."> </script> </head> <body> Action = "/upload2" enctype = "multipart/form-data" method = "post" target = "frm" onsubmit = "loading (true) ؛ 50px ؛ " type = "submit" value = "ashanchronous upload"> <span id = "uptxt" style = "display: none"> uploading ... </span> </p> </form> <div id = "flist" style = "border: 1px darkgray ؛"> </viv> <sript> callback functionised (filename) ad التحميل (خطأ) ؛ } الوظيفة addTofList (fname) {var temp = ["<p id =" " + fname +" '> "، fname ،" <button onClick =' delfile (/"" + fname + "/") ؛ $ ("#flist"). append (temp.join ("")) ؛} تحميل الوظيفة (Showloading) {if (Showloading) {$ ("#uptxt"). show () ؛ } آخر {$ ("#uptxt"). إخفاء ؛ }} </script> </body> </html> هناك نقطتان رئيسيتان في هذه التكنولوجيا:
1. سيحدد الأداء الهدف ، وسيتم إرجاع النتيجة المقدمة إلى iframe المخفي. (أي هدف النموذج يتوافق مع سمة اسم iframe).
2. بعد الانتهاء من التقديم ، تتواصل الصفحة في iframe مع الصفحة الرئيسية. كيفية إخطار نتيجة التحميل ومعلومات ملف الخادم التواصل مع الصفحة الرئيسية؟
بعد تلقي الملف ، نستخدم NodeJS لإرجاع طريقة محددة بواسطة النافذة. الصفحة الرئيسية. بعد التنفيذ ، يمكننا أن نعرف أن تحميل الملف قد اكتمل. الرمز بسيط للغاية:
Router.post ('/upload2' ، multipartmiddleware ، function (req ، res) {var fpath = req.files.myfile.path ؛ var fname = fpath.substr (fath.lastindexof ('//') + 1) ؛ "') ؛" ، </script> "] بعد التنفيذ ، يمكنك فتح خيار المطور وستجد أن بعض البيانات التي يتم إرجاعها من iframe المخفية يتم إرجاعها.
يستخدم النوع الثالث xmlhttprequest2 للتحميلات غير المتزامنة الحقيقية .
أو نشر الرمز أولاً:
بعد التنفيذ ، يمكنك فتح خيار المطور وستجد أن بعض البيانات التي يتم إرجاعها من iframe المخفية يتم إرجاعها. يستخدم النوع الثالث xmlhttprequest2 للتحميلات غير المتزامنة الحقيقية. دعنا ننشر الرمز أولاً:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> leveldly level2 تحميل غير متزامن </title> <script type = "text/javaScript" src = "jquery path ..."> </script> </head> <body> <pod> id = "myfile" style = "display: inline"> </p> <p id = "upbtn"> <input style = "padding-left: 50px ؛ padding-right: 50px ؛" type = "button" value = "oncload onclick =" upload ؛> <span id = "uptxt" style = "display: none"> تحميل ... </span> <span id = "upprog"> </span> <button id = "stopbtn" style = "display: none ؛ DarkGray ؛ "> </viv> <script> تحميل الوظيفة {// 1. إعداد formdata var fd = new formData ؛ fd.append ("myfile" ، $ ("#myfile") [0] .files [0]) ؛ // إنشاء كائن XHR var xhr = new xmlhttprequest ؛ // استمع إلى الحالة والاستجابة في الوقت الحقيقي // XHR و XHR.UPLOAD أحداث تقدم ، XHR.Progress هو تقدم التنزيل ، XHR.UPLOAD.Progress هو تحديث التحديث XHR.UPLOAD.ONPROGRESS = الحدث (الحدث) {if (event.multsable) console.log ('٪ d ٪' ، في المئة) ؛ $ ("#upprog"). النص (في المئة) ؛ }} ؛ // STRINCMISS START EVENT XHR.OnloadStart = function (event) {console.log ('load start') ؛ $ ("#upprog"). النص ('ابدأ التحميل') ؛ $ ("#stopBtn"). واحد ("انقر" ، دالة {xhr.abort ؛ $ (this) .hide () ؛}) ؛ التحميل (صحيح) ؛ } ؛ // أكملت عملية ajax بنجاح الحدث xhr.onload = function (event) {console.log ('load success') ؛ $ ("#upprog"). النص ("تحميل النجاح") ؛ console.log (XHR.Responsetext) ؛ var ret = json.parse (xhr.responsetext) ؛ addTofList (ret.fname) ؛ } ؛ // حدث حدث خطأ في عملية AJAX XHR.ORROR = function (event) {console.log ('error') ؛ $ ("#upprog"). النص (حدث خطأ ") ؛ } ؛ // يتم إلغاء Ajax XHR.Onabort = function (event) {console.log ('Abort') ؛ $ ("#upprog"). النص (تم إلغاء العملية ") ؛ } ؛ // ينتهي نقل التحميل ، وسيتم تشغيله بغض النظر عن النجاح أو الفشل xhr.onloadend = function (event) {console.log ('load end') ؛ التحميل (خطأ) ؛ } ؛ // بدء طلب AJAX لنقل البيانات XHR.Open ('post' ، '/upload3' ، true) ؛ XHR.SEND (FD) ؛ } الوظيفة addTofList (fname) {var temp = ["<p id =" " + fname +" '> "، fname ،" <button onClick =' delfile (/"" + fname + "/") ؛ $ ("#flist"). append (temp.join ("")) ؛ } دالة delfile (fname) {console.log ('لحذف الملف:' + fname) ؛ // todo: يرجى تطبيق} تحميل الوظيفة (Showloading) {if (Showloading) {$ ("#uptxt"). show () ؛ $ ("#stopBtn"). show () ؛ } آخر {$ ("#uptxt"). Hide () ؛ $ ("#stopBtn"). Hide () ؛ }} </script> </body> </html> هناك الكثير من التعليمات البرمجية ، لكن من السهل فهمها. يعرف أي شخص استخدم Ajax أن كائنات XHR توفر طريقة رد اتصال onReadyStateChange للاستماع لعملية الطلب/الاستجابة بأكملها. هناك العديد من أحداث التقدم في مواصفات XMLHTTPREQUEST المستوى 2. يوجد 6 أحداث أدناه:
1.LoadStart: يتم تشغيله عند استلام البايت الأول لبيانات الاستجابة.
2. progress: يتم تشغيله بشكل مستمر أثناء استقبال الاستجابة.
3.error: يتم تشغيله عند حدوث خطأ في الطلب.
4.Abort: يتم تشغيله عند إنهاء الاتصال بسبب استدعاء طريقة الإحباط.
5. تحميل: يتم تشغيله عند استلام بيانات الاستجابة الكاملة.
6. التحميل: يتم تشغيله بعد اكتمال الاتصال أو الخطأ ، يتم إحباط أحداث التحميل.
هذه المرة يمكننا تفسير الكود: عند بدء تشغيل حدث الإرسال ، نضيف حدث نقرة على زر الإرسال الإيقاف ، ويمكن أن تتوقف طريقة الإجهاض المدمجة عن الإرسال. إذا لم تنقر ، فسيتم تحميله بشكل طبيعي حتى يتم الانتهاء من الإرسال. رمز الخلفية الخاص به يشبه الطريقة الثانية.
الأساليب الثلاثة لها مزاياها وعيوبها ، دعنا نجعل ملخصًا بسيطًا.
تتمتع عناصر التحكم في الطرف الثالث بالتفاعل الجيد وقابلية التحكم ، لأنها قريبة من الطبقة السفلية وأدائها أيضًا ممتاز. ومع ذلك ، نظرًا لأنه من الصعب الكتابة ، فعادة ما تحتاج إلى تثبيت المكونات الإضافية بنفسك ، وأحيانًا قد تحتاج إلى كتابتها بنفسك.
أنا شخصياً أعتقد أن طريقة iframe المخفية هي طريقة مدروسة للغاية. يمكن أن يساعدنا Iframe في القيام بالكثير من الأشياء. يحتوي هذا النهج على توافق واسع في المتصفح ولا يتطلب تثبيت ملحقات إضافية. ومع ذلك ، فإن لديها تفاعل ضعيف ، وعملية تحميل لا يمكن السيطرة عليها ، وأدائها هو أيضا متوسط جدا.
بالنسبة لتحميل Ajax Pure Level ، يجب أن يكون له متصفح مع إصدار أعلى (IE9+). ولكن لديها تفاعل جيد للغاية ، يمكنك رؤية تقدم التحميل ويمكن التحكم فيه.
يمكن أن يتم التنمية بشكل مختلف وفقًا للمتطلبات. أنا شخصياً أعتقد أن تحميل هذه الملفات ، وخاصة الحالة الثانية ، يوفر نوعًا من الفكرة ، التي تستخدم خصائص بعض علامات HTML ، أمر يحتاج مطورونا إلى التفكير أكثر.
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.