يلخص هذا المثال طرق تحميل JS ديناميكيًا. شاركه للرجوع إليه. التفاصيل كما يلي:
الطريقة 1: المستند المباشر. الكتابة (غير متزامن)
انسخ الرمز كما يلي: <script language = "javaScript">
document.write ("<script src = 'res/extwidget/echarts/xx.js'> <//script>") ؛
</script>
نظرًا لأن هذه الطريقة غير متزامنة ، فإن المستند. سوف يعيد كتابة الواجهة ، وهو أمر غير عملي بشكل واضح
الطريقة 2: تغيير ديناميكي سمة SRC للنصي الموجود (غير متزامن)
انسخ الرمز كما يلي: <script src = '' 'id = "xx"> </script>
<script language = "javaScript">
xx.src = "test.js"
</script>
لن تغير هذه الطريقة عناصر الواجهة ، ولا تقوم بإعادة كتابة عناصر الواجهة ، ولكن سيتم تحميلها أيضًا بشكل غير متزامن
الطريقة 3: إنشاء عناصر نصية (غير متزامنة) ديناميكيًا (غير متزامن)
انسخ الرمز على النحو التالي: <script>
var body = document.getElementSbyTagName ('body'). [0] ؛
var script = document.createElement ("script") ؛
script.type = "text/javaScript" ؛
script.src = "xx.js" ؛
body.appendchild (Oscript) ؛
</script>
بالمقارنة مع الطريقة الثانية ، فإن ميزة هذه الطريقة هي أنها لا تتطلب كتابة علامة نصية على الواجهة في البداية. العيب غير متزامن
الطريقة 4: التحميل xmlhttprequest/activexobject (غير متزامن)
انسخ الرمز كما يلي:/**
* التحميل غير المتزامن لنصوص JS
* param id معرف علامة <script> التي يجب تعيينها
* param url المسار النسبي أو المطلق إلى ملف JS
*/
loadjs: function (id ، url) {
var xmlhttp = null ؛
if (window.activexObject) {// ie
يحاول {
// يمكن استخدامها في IE6 والإصدارات الأحدث
XMLHTTP = New ActivexObject ("msxml2.xmlhttp") ؛
} catch (e) {
//ie5.5 يمكن استخدام الإصدارات اللاحقة
XMLHTTP = New ActivexObject ("Microsoft.xmlhttp") ؛
}
} آخر إذا (window.xmlhttprequest) {
// Firefox ، Opera 8.0+ ، Safari ، Chrome
xmlHttp = new xmlhttprequest () ؛
}
// استخدام التحميل المتزامن
xmlhttp.open ("get" ، url ، false) ؛
// إرسال طلب التزامن ،
// إذا كان المتصفح كروم أو أوبرا ، فيجب نشره قبل أن يتمكن من تشغيله ، وإلا سيتم الإبلاغ عن خطأ
xmlhttp.send (null) ؛
XMLHTTP.OnReadyStateChange = function () {
// 4 يعني أنه تم إرسال البيانات
if (xmlhttp.readyState == 4) {
// 0 هي المنطقة المحلية التي تم الوصول إليها ، يعني 200 إلى 300 أن الوصول إلى الخادم ناجح.
// 304 يعني أن الوصول هو ذاكرة التخزين المؤقت بدون تعديل
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhtp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementSbyTagName ("body") [0] ؛
var myscript = document.createElement ("script") ؛
myscript.language = "javaScript" ؛
myscript.type = "text/javaScript" ؛
myscript.id = id ؛
يحاول{
// IE8 وما يلي لا يدعمون هذه الطريقة ، ويجب ضبطها من خلال سمة النص
myscript.appendchild (document.createTextNode (xmlhttp.responsetext)) ؛
} catch (ex) {
myscript.text = xmlhttp.responsetext ؛
}
mybody.appendchild (myscript) ؛
}
}
}
// تستخدم التحميل غير المتزامن
xmlhttp.open ("get" ، url ، true) ؛
xmlhttp.send (null) ؛
}
الإعداد إلى خطأ في المفتوح يعني التحميل المتزامن. التحميل المتزامن لا يتطلب إعداد حدث onReadyStateChange
يتم تنفيذ هذه الطرق الأربعة بشكل غير متزامن ، أي أثناء تحميل هذه البرامج النصية ، يستمر البرنامج النصي في الصفحة الرئيسية.
الطريقة 5: التحميل xmlhttprequest/activexobject (متزامن)
انسخ الرمز كما يلي:/**
* التحميل المتزامن لنصوص JS
* param id معرف علامة <script> التي يجب تعيينها
* param url المسار النسبي أو المطلق إلى ملف JS
* regurn {boolean} إرجاع ما إذا كان يتم تحميله بنجاح ، يعني صحيح أن النجاح ، يعني الفشل
*/
loadjs: function (id ، url) {
var xmlhttp = null ؛
if (window.activexObject) {// ie
يحاول {
// يمكن استخدامها في IE6 والإصدارات الأحدث
XMLHTTP = New ActivexObject ("msxml2.xmlhttp") ؛
} catch (e) {
//ie5.5 يمكن استخدام الإصدارات اللاحقة
XMLHTTP = New ActivexObject ("Microsoft.xmlhttp") ؛
}
} آخر إذا (window.xmlhttprequest) {
// Firefox ، Opera 8.0+ ، Safari ، Chrome
xmlHttp = new xmlhttprequest () ؛
}
// استخدام التحميل المتزامن
xmlhttp.open ("get" ، url ، false) ؛
// إرسال طلب المزامنة. إذا كان المتصفح كروم أو أوبرا ، فيجب نشره قبل أن يتمكن من تشغيله ، وإلا سيتم الإبلاغ عن خطأ
xmlhttp.send (null) ؛
// 4 يعني أنه تم إرسال البيانات
if (xmlhttp.readyState == 4) {
// 0 هي المنطقة المحلية التي تم الوصول إليها. 200 إلى 300 يعني أن الوصول إلى الخادم ناجح ، و 304 يعني أنه لم يتم إجراء ذاكرة التخزين المؤقت التي تم الوصول إليها.
if ((xmlhttp.status> = 200 && xmlhttp.status <300) || xmlhtp.status == 0 || xmlhttp.status == 304) {
var mybody = document.getElementSbyTagName ("body") [0] ؛
var myscript = document.createElement ("script") ؛
myscript.language = "javaScript" ؛
myscript.type = "text/javaScript" ؛
myscript.id = id ؛
يحاول{
// IE8 وما يلي لا يدعمون هذه الطريقة ، ويجب ضبطها من خلال سمة النص
myscript.appendchild (document.createTextNode (xmlhttp.responsetext)) ؛
} catch (ex) {
myscript.text = xmlhttp.responsetext ؛
}
mybody.appendchild (myscript) ؛
العودة صحيح.
}آخر{
العودة كاذبة
}
}آخر{
العودة كاذبة
}
}
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.