动态加载js

方法一：直接document.write（异步）

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

由于这种方式是异步加载，document.write会重写界面，明显不实用
方法二：动态改变已有script的src属性（异步）

<script src='' id="xx"></script> 
<script language="javascript"> 
    xx.src="test.js" 
</script> 

此种方法不会改变界面元素，不重写界面元素，但同样是异步加载
方法三：动态创建script元素（异步）

<script> 
    var body= document.getElementsByTagName('BODY').[0]; 
    var script= document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src="xx.js"; 
    body.appendChild( oScript); 
</script> 

此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载

方法四：XMLHttpRequest/ActiveXObject加载（异步）

    /**
       * 异步加载js脚本
       * @param id   需要设置的<script>标签的id
       * @param url   js文件的相对路径或绝对路径
       */
      loadJs:function(id,url){
      	  
          var  xmlHttp = null;
          if(window.ActiveXObject){//IE
              try {
                  //IE6以及以后版本中可以使用
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
              } catch (e) {
                  //IE5.5以及以后版本可以使用
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
          }else if(window.XMLHttpRequest){
        	  //Firefox，Opera 8.0+，Safari，Chrome
              xmlHttp = new XMLHttpRequest();
          }
          //采用同步加载
          xmlHttp.open("GET",url,false);
          //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
          xmlHttp.send(null);
          xmlHttp.onreadystatechange = function(){
              //4代表数据发送完毕
              if( xmlHttp.readyState == 4 ){
                  //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
                  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{
                          //IE8以及以下不支持这种方式，需要通过text属性来设置
                          myScript.appendChild(document.createTextNode(xmlHttp.responseText));
                      }catch (ex){
                          myScript.text = xmlHttp.responseText;
                      }
                      myBody.appendChild(myScript);
                  }
              }
          }
           //采用异步加载
          xmlHttp.open("GET",url,true);
          xmlHttp.send(null);
      }

open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件

这四种方法都是异步执行的，也就是说，在加载这些脚本的同时，主页面的脚本继续运行。

方法五：XMLHttpRequest/ActiveXObject加载（同步）

<strong><span style="font-size: 14px;"> </span><span style="font-size:14px;"> </span></strong><span style="font-size:14px;">/**
       * 同步加载js脚本
       * @param id   需要设置的<script>标签的id
       * @param url   js文件的相对路径或绝对路径
       * @return {Boolean}   返回是否加载成功，true代表成功，false代表失败
       */
      loadJs:function(id,url){
      	  
          var  xmlHttp = null;
          if(window.ActiveXObject){//IE
              try {
                  //IE6以及以后版本中可以使用
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
              } catch (e) {
                  //IE5.5以及以后版本可以使用
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
              }
          }else if(window.XMLHttpRequest){
        	  //Firefox，Opera 8.0+，Safari，Chrome
              xmlHttp = new XMLHttpRequest();
          }
          //采用同步加载
          xmlHttp.open("GET",url,false);
          //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
          xmlHttp.send(null);
          //4代表数据发送完毕
          if( xmlHttp.readyState == 4 ){
              //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
              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{
                      //IE8以及以下不支持这种方式，需要通过text属性来设置
                      myScript.appendChild(document.createTextNode(xmlHttp.responseText));
                  }catch (ex){
                      myScript.text = xmlHttp.responseText;
                  }
                  myBody.appendChild(myScript);
                  return true;
              }else{
                  return false;
              }
          }else{
              return false;
          }
      }</span>