Dynamic js loading method summary and js loading Summary

Dynamic js loading method summary and js loading Summary

The examples in this article summarize the methods for dynamically loading js. Share it with you for your reference. The details are as follows:

Method 1: directly document. write (asynchronous)
Copy codeThe Code is as follows: <script language = "javascript">
Document. write ("<script src = 'res/extwidget/echarts/xx. js'> <\/script> ");
</Script>

Because this method is asynchronously loaded, document. write will overwrite the interface, which is obviously not practical.
Method 2: dynamically change the src attribute of an existing script (asynchronous)
Copy codeThe Code is as follows: <script src = ''id =" xx "> </script>
<Script language = "javascript">
Xx. src = "test. js"
</Script>

This method does not change the interface elements, but does not overwrite the interface elements, but is also asynchronously loaded.
Method 3: dynamically create script elements (asynchronous)
Copy codeThe Code is as follows: <script>
Var body = document. getElementsByTagName ('body'). [0];
Var script = document. createElement ("script ");
Script. type = "text/javascript ";
Script. src = "xx. js ";
Body. appendChild (oScript );
</Script>

Compared with the second method, this method does not need to write a script tag on the interface at the very beginning. The disadvantage is asynchronous loading.

Method 4: XMLHttpRequest/ActiveXObject loading (asynchronous)
Copy codeThe Code is as follows :/**
* Asynchronously load js scripts
* @ Param id: id of the <script> tag to be set
* @ Param url: relative or absolute path of the js File
*/
LoadJs: function (id, url ){

Var xmlHttp = null;
If (window. ActiveXObject) {// IE
Try {
// Available in IE6 and later versions
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
// IE5.5 and later versions can be used
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
} Else if (window. XMLHttpRequest ){
// Firefox, Opera 8.0 +, Safari, Chrome
XmlHttp = new XMLHttpRequest ();
}
// Adopt synchronous Loading
XmlHttp. open ("GET", url, false );
// Send a synchronization request,
// If the browser is Chrome or Opera, it must be published before it can run. Otherwise, an error is reported.
XmlHttp. send (null );
XmlHttp. onreadystatechange = function (){
// 4 indicates that the data has been sent
If (xmlHttp. readyState = 4 ){
// 0 indicates the local access, and 200 to 300 indicates that the access to the server is successful,
// 304 indicates that the cache is accessed without modification
If (xmlHttp. status> = 200 & xmlHttp. status <300) | xmlHttp. 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;
Try {
// This method is not supported in IE8 and earlier versions. You need to set it using the text attribute.
MyScript. appendChild (document. createTextNode (xmlHttp. responseText ));
} Catch (ex ){
MyScript. text = xmlHttp. responseText;
}
MyBody. appendChild (myScript );
}
}
}
// Asynchronous loading
XmlHttp. open ("GET", url, true );
XmlHttp. send (null );
}

The onreadystatechange event is not required for Synchronous loading.

These four methods are executed asynchronously. That is to say, the scripts on the home page continue to run while loading these scripts.

Method 5: XMLHttpRequest/ActiveXObject loading (synchronous)
Copy codeThe Code is as follows :/**
* Synchronously load js scripts
* @ Param id: id of the <script> tag to be set
* @ Param url: relative or absolute path of the js File
* @ Return {Boolean} indicates whether the load is successful. true indicates that the load is successful, and false indicates that the load is failed.
*/
LoadJs: function (id, url ){

Var xmlHttp = null;
If (window. ActiveXObject) {// IE
Try {
// Available in IE6 and later versions
XmlHttp = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
// IE5.5 and later versions can be used
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP ");
}
} Else if (window. XMLHttpRequest ){
// Firefox, Opera 8.0 +, Safari, Chrome
XmlHttp = new XMLHttpRequest ();
}
// Adopt synchronous Loading
XmlHttp. open ("GET", url, false );
// Send a synchronization request. If the browser is Chrome or Opera, it must be published before it can run. Otherwise, an error is reported.
XmlHttp. send (null );
// 4 indicates that the data has been sent
If (xmlHttp. readyState = 4 ){
// 0 indicates the local access, 200 to 300 indicates that the access to the server is successful, and 304 indicates that the access to the cache is not modified.
If (xmlHttp. status> = 200 & xmlHttp. status <300) | xmlHttp. 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;
Try {
// This method is not supported in IE8 and earlier versions. You need to set it using the text attribute.
MyScript. appendChild (document. createTextNode (xmlHttp. responseText ));
} Catch (ex ){
MyScript. text = xmlHttp. responseText;
}
MyBody. appendChild (myScript );
Return true;
} Else {
Return false;
}
} Else {
Return false;
}
}

I hope this article will help you design javascript programs.