小兔网

XMLHttpRequest/ActiveXObject异步加载

在同一个文件夹下面创建一个function5.html,代码如下:

<html><head>  <title></title>  <script type="text/javascript">    function init()    {      //加载package.js文件,设置script的id为yy      ajaxPage("yy","package.js");      //此方法为package.js里面的方法,此处执行方法成功      functionOne();    }    function ajaxPage(sId,url)    {      var oXmlHttp = getHttpRequest();      oXmlHttp.onreadystatechange = function()      {        //4代表数据发送完毕        if ( oXmlHttp.readyState == 4 )        {          //0为访问的本地,200代表访问服务器成功,304代表没做修改访问的是缓存          if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)          {            includeJS(sId,oXmlHttp.responseText);          }          else          {          }        }      }      oXmlHttp.open("GET",url,true);      oXmlHttp.send(null);    }    function getHttpRequest()    {      if(window.ActiveXObject)//IE      {        return new ActiveXObject("MsXml2.XmlHttp");      }      else if(window.XMLHttpRequest)//其他      {        return new XMLHttpRequest();      }    }    function includeJS(sId,source)    {      if((source != null)&&(!document.getElementById(sId)))      {        var myHead = document.getElementsByTagName("HEAD").item(0);        var myScript = document.createElement( "script" );        myScript.language = "javascript";        myScript.type = "text/javascript";        myScript.id = sId;        try{          myScript.appendChild(document.createTextNode(source));        }        catch (ex){          myScript.text = source;        }        myHead.appendChild( myScript );      }    }  </script></head><body>  <input type="button" value="测试按钮" onclick="init()"/></body></html>

ActiveXObject只有IE里面才有,其他浏览器大部分支持XMLHttpRequest,通过此办法我们可以实现动态加载脚本了,不过是异步加载,也没法运行functionOne,第二次就可以运行了,但是可惜的是在IE、Firefox、Safari下可以运行,在Opera、Chrome下会出错,不过只要发布之后在Chrome和Opera下就不会出现错误了。

其实这里把open里面设置为false就是同步加载了,同步加载不需要设置onreadystatechange事件。

XMLHttpRequest/ActiveXObject同步加载

在这里我把一些情况考虑在内,写成了一个方法,封装为loadJS.js,方便以后直接调用,代码如下:

/** * 同步加载js脚本 * @param id  需要设置的<script>标签的id * @param url  js文件的相对路径或绝对路径 * @return {Boolean}  返回是否加载成功,true代表成功,false代表失败 */function loadJS(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 myHead = document.getElementsByTagName("HEAD").item(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;      }      myHead.appendChild( myScript );      return true;    }    else    {      return false;    }  }  else  {    return false;  }}

此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布,注释还是写的比较清楚的,以后需要加载某个js文件时,只需要一句话就行了,如loadJS("myJS","package.js")。方便实用。

以上就是XMLHttpRequest/ActiveXObject同步和异步加载用法实例详解的知识。速戳>>知识兔学习精品课!