Dynamic loading of JS method Rollup _javascript Skills

The method of dynamically loading JS is summarized in the example. Share to everyone for your reference. Specifically as follows:

Method One: Direct document.write (asynchronous)

Copy Code code as follows:

<script language= "JavaScript" >
document.write ("<script src= ' res/extwidget/echarts/xx.js ' ><\/script>");
</script>

Since this is an asynchronous load, document.write will rewrite the interface, which is obviously impractical
Method Two: Dynamically changing the SRC attribute of an existing script (asynchronous)

Copy Code code as follows:

<script src= ' id= "xx" ></script>
<script language= "JavaScript" >
Xx.src= "Test.js"
</script>

This method does not change the interface element, does not rewrite the interface element, but is also asynchronously loaded
Method Three: Dynamically creating a SCRIPT element (asynchronous)

Copy Code code 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>

The advantage of this approach in relation to the second is that you do not need to first write a script tag in the interface, the disadvantage or asynchronous loading

Method Four: Xmlhttprequest/activexobject load (asynchronous)

Copy Code code as follows:

/**
* Load JS Script asynchronously
* ID of <script> label to be set for @param ID
* @param the relative or absolute path of the URL js file
*/
Loadjs:function (Id,url) {

var xmlHttp = null;
if (window. ActiveXObject) {//ie
try {
IE6 and later versions can be used in
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 ();
}
Using synchronous loading
Xmlhttp.open ("Get", url,false);
Send a sync request,
If the browser is Chrome or opera, it must be published before it can be run, or it will complain
Xmlhttp.send (NULL);
Xmlhttp.onreadystatechange = function () {
4 means data sent.
if (xmlhttp.readystate = = 4) {
0 for the local access, 200 to 300 represents the success of the access server,
304 represents no modification access is cached
if ((Xmlhttp.status >= && 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{
IE8 and the following do not support this method, you need to set it through the Text property
Myscript.appendchild (document.createTextNode (Xmlhttp.responsetext));
}catch (ex) {
Myscript.text = Xmlhttp.responsetext;
}
Mybody.appendchild (MyScript);
}
}
}
Using asynchronous loading
Xmlhttp.open ("Get", url,true);
Xmlhttp.send (NULL);
}

Open inside set to false is synchronized loading, synchronous loading does not need to set the onReadyStateChange event

All four of these methods are executed asynchronously, that is, the script on the master page continues to run while the scripts are loaded.

Method Five: Xmlhttprequest/activexobject load (sync)

Copy Code code as follows:

/**
* Sync Load JS script
* ID of <script> label to be set for @param ID
* @param the relative or absolute path of the URL js file
* @return {Boolean} returns whether the load succeeded, true for success, and false for failure
*/
Loadjs:function (Id,url) {

var xmlHttp = null;
if (window. ActiveXObject) {//ie
try {
IE6 and later versions can be used in
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 ();
}
Using synchronous loading
Xmlhttp.open ("Get", url,false);
Send a sync request, if the browser is Chrome or opera, must be published before it can run, or it will be an error
Xmlhttp.send (NULL);
4 means data sent.
if (xmlhttp.readystate = = 4) {
0 for the local access, 200 to 300 for the access to the server success, 304 for the No modification access is the cache
if ((Xmlhttp.status >= && 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{
IE8 and the following do not support this method, you need to set it through the Text property
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 with your JavaScript programming.