异步加载js文件的方法总结

方法一，jQuery.getScript

HTML 代码：

代码如下 复制代码 <button id="go">Run</button><div class="block"></div>

jQuery 代码：

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function(){ $("#go").click(function(){ $(".block").animate( { backgroundColor: 'pink' }, 1000) .animate( { backgroundColor: 'blue' }, 1000); });});

方法三

代码如下 复制代码 同步加载，单步加载，引入js内容可以直接使用var Skip={};//获取xmlHttPRequest对象(提供客户端同http服务器通讯的协议)Skip.getxmlhttpRequest=function (){ if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器 return new XMLHttpRequest() ; else if ( window.ActiveXObject ) // IE return new ActiveXObject("MsXml2.XmlHttp") ; },//导入内容Skip.includeJsText =function (rootObject,jsText){ if ( rootObject != null ){ var oScript = document.createElement( "script" ); oScript.type = "text/javascript"; //oScript.id = sId; //oScript.src = fileUrl; //oScript.defer = true; oScript.text = jsText; rootObject.appendChild(oScript); //alert(oScript.text); } },//导入文件Skip.includeJsSrc =function (rootObject, fileUrl){ if ( rootObject != null ){ var oScript = document.createElement( "script" ); oScript.type = "text/Javascript"; oScript.src = fileUrl; rootObject.appendChild(oScript); } },//同步加载Skip.addJs=function(rootObject, url){ var oXmlHttp = Skip.getXmlHttpRequest() ; oXmlHttp.onreadystatechange = function(){//其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到 if ( oXmlHttp.readyState == 4 ){ // www.111cn.net 当执行完成以后(返回了响应)所要执行的 if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有读取对应的url文件,404表示不存在这个文件 Skip.includeJsSrc( rootObject, url); } else{ alert( 'XML(www.111cn.net) request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ; } } } //1.True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法. //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态. oXmlHttp.open('GET', url, false); //url为js文件时,ie会自动生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不会 oXmlHttp.send(null); Skip.includeJsText(rootObject,oXmlHttp.responseText); }};var rootObject=document.getElementById("divId");Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}test();//即使马上调用也不会出错了.</script>

方法三，自己用的加载js文件,支持多文件,不兼容ie

代码如下 复制代码

/** * 加载js文件 * @param {string || array} url js路径 * @param {Function} fn 加载完成后回调 * @return {object} game对象 * @example * getScript("url.js",fn) * getScript(["url-1.js","url-2.js"],fn) */game.getScript = (function() { var cache = {};//内部缓存下url,下次则不请求 return function(url, fn) { if ("string" === typeof(url)) { url = [url]; //如果不是数组带个套 }; var i = 0,//循环起 ok = 0,//加载成功几个js len = url.length,//一共几个js head = document.getElementsByTagName("head")[0], js, _url, create = function(url) {//创建js js = document.createElement("script"); js.type = "text/javascript"; js.src = url; head.appendChild(js); return js; }; for (; i < len;) { if (cache[encodeURIComponent((_url = url[i++]))]) {//如果加载过 (++ok >= len && fn) && fn();//如果加载完所有的js则执行回调 continue; } cache[encodeURIComponent(_url)] = !0;//设置缓存 js = create(_url);//创建js fn && (js.onload = function() { if (++ok >= len) {//如果加载完所有的js则执行回调 fn(); } }); }; head = js = _url = create = null; return this; }})(); from:http://www.111cn.net/wy/js-Ajax/58715.htm