Form:http://www.webreference.com/programming/javascript/mk/

Author:MarkKahn

ManydevelopershavealargelibraryofJavaScriptcodeattheirfingertipsthattheydeveloped,theircolleguesdeveloped,orthatthey'vepiecedtogetherfromscriptsallovertheInternet.Haveyoueverthoughtthatitwouldbenicetonothavetosearchthroughallthosefilesjusttofindthatonefunction?ThisarticlewillshowyouhowdynamicallyincludeanyJavaScriptfile,atruntime,bysimplycallingafunctioninthatfile!

Here'sanexample:Youhaveafunctionfoo()infilebar.js.Inyourcode,youknowthatfoo()mightbecalled,butitprobablywon'tbebecausemostpeopledonotuseitsfunctionality.Youdon'twanttoforcetheusertodownloadbar.jsunlessit'sgoingtobeusedbecauseit'safairlylargefile.Hereyou'lllearnhowtomakeafakefoo()functionthatactuallyloadsbar.jsontheflyandthencallstherealfoo()function.

DynamicallyLoadingaScript

Asmanydevelopersknow,thereareatleasttwodifferentwaystodynamicallyloadascriptatruntime.Thefirstistocreateascriptobjectandappendittothedocument.ThesecondistouseanXMLHTTPrequesttograbthesourcecode,andtheneval()it.

Itisthissecondmethodthatwe'regoingtouse,andwe'regoingtoexploitthefactthatanXMLHTTPrequesthasthecapabilitytocompletelystallanyscriptactivity.

First,somebasics:howtocreateanXMLHTTPObject.Thereareasmanydifferentfunctionstoreturnacross-browserXMLHTTPObjectastherearedevelopersthatworkwithAJAX.Ihappentohavemyownaswell,andhere'sasimplifiedexampleofthat:

复制代码 代码如下:

functiongetXMLHttpObj(){

if(typeof(XMLHttpRequest)!='undefined')

returnnewXMLHttpRequest();

varaxO=['Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0',

'Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'],i;

for(i=0;i<axO.length;i++)

try{

returnnewActiveXObject(axO[i]);

}catch(e){}

returnnull;

}

MostbrowsersotherthanInternetExplorer5or6haveabuilt-inXMLHttpRequestobject.InternetExplorer7,whenit'sreleased,willalsohavethisobjectnatively.Thefirstthingwedoischecktoseeifthisobjectexists.Ifitdoes,wecreateaninstanceofitandthat'sit.Iftheobjectdoesn'texist,weattempttocreateoneofseveralActiveXObjects.Wedon'tknowwhatobjectsourusershaveinstalled,soweattempttocreateseveraldifferentXMLHTTPobjects,startingwiththenewestones.

Nowinordertodynamicallyloadfunctions,wefirstneedtodefinethem.Wecoulddothisonefunctionatatime,butinsteadofhard-codingdozensoffunctions,wecanchoosetojustmakeanobjectorarraywithallthefilenamesandthefunctionsyouwanttohaveauto-included:

复制代码 代码如下:

varautoIncludeFunctions={

'scripts/file1.js':['function1','function2','function3'],

'scripts/file2.js':['function4','function5','function6'],

'scripts/file3.js':['function7','function8','function9']

}

OurautoIncludeFunctionsobjectshouldcontainalistofJavaScriptfiles,aswellasalistoffunctionsinthosefiles.HereweareusingshorthandJavaScriptnotationtocreateboththeobjectandthearrays,butthesamethingcouldbeaccomplishedinmanydifferentways.

These.jsfilescancontainanycodeyouhaveavailable,suchasJavaScriptmenus,animations,etc.Thesimplestexamplewouldbeafiletitled"file1.js"thatonlycontained"functionfunction1(){alert('Hello,World!');}".

Notethatifanyofthesefilescontainfunctionswiththesamenameasanotherfile,onlythelastfunctionlistedwillbeused.

Tomakethingsabiteasier,we'regoingtomakeafunctionthatwillpullaJavaScriptfiledownandexecuteit.It'sveryimportant,inourcase,thatthethirdparamatersenttotheXMLHTTPobjectbefalse.Thisforcesthescripttowaitfortheresponsetodownloadasopposedtocontinuingonwithothercode.

复制代码 代码如下:

functionloadScript(scriptpath,functions){

varoXML=getXMLHttpObj();

oXML.open('GET',scriptpath,false);

oXML.send('');

eval(oXML.responseText);

for(vari=0;i<functions.length;i++)

window[functions[i]]=eval(functions[i]);

}

TheloadScriptfunctionexpectstwoarguments:scriptpathandfunctions."scriptpath"shouldcontaintheURLtoyourJavaScriptfile,and"functions"isthearrayoffunctionsthatexistinthisJavaScriptfile.

Asyoucansee,thecodetopullandexecuteascriptisstraightforward.Thebrowserfirstdownloads,andtheninterpretstheJavaScriptfile.Ifyou'vereadanyotherarticlesonAJAXdevelopment,youmightrememberthatinmostcasesthethirdargumentsenttotheopen()functionofanXMLHTTPobjectisusually"true."Inourcasewehaveitsetto"false."ThisargumentcontrolsthestateoftheXMLHTTPobject.Ifsettotrue,theobjectrunsasynchrounously,meaningthatallotherJavaScriptcodecontinueswhiletheobjectisloading.Whilethisisagoodthinginmanycircumstances,ifweimplementedithereourcodewouldreturnbeforeourfilewasdoneloading.Sincewewantourcodetowaituntilthisfileiscomplete,wesetthisthirdargumenttofalse,thuspausingourJavaScriptexecutionuntilwearereadytocontinue.

WhenthecodeisevaluatedfromtheresponseText,it'sexecutedinthelimitedscopeoftheloadScriptfunctionandbecauseofthis,noneofthesefunctionswillbeavailableoutsideoftheloadScriptfunction.Inorderdogetaroundthis,theforloopaddseachfunctiontothewindowobject,thusmakingitgloballyavailable.

It'simportanttonotethatonlyscriptsonthesameserverasthecurrentpagecanbecalledinthismanner.ThisisinherenttotheXMLHTTPObjectandisanecessarymeasuretoincreasegeneralbrowsersecurity.