Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use ajax to dynamically load the required js files. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Some time ago, I used dojo, and the function of dojo.require is very good. When I look at the code, I feel dizzy and a lot of things. Alas, I still write a simple point by myself. Dojo.require can be introduced into the package. I only do an import js file.

At the beginning of the [xss_clean], the execution order is out of order, which is imported later, and we always need to import the js in the previous implementation, so that "so-and-so is not defined" will be reported in the execution, which is a matter of order.

Then, I want to use ajax synchronous (note: not asynchronous) to call remote js files. There is a problem here, that is, when we want js files, we use either absolute path or relative path. If we use relative path, which is the reference? You can use the file that calls js as a reference, or you can use the js file that implements the calling function as a reference. Here, I choose to write a js to call other js as needed. After some modification, the path problem is solved. However, there will be garbled problems with the read data in Chinese, but fortunately, we use UTF-8 to do everything (because of internationalization), so we avoid it here.

After the remote js content is fetched, it will be executed. After executing with eval, it is found that the content defined in the remote js is still not available. Strange, after some fierce alert, we found that there is a problem with the context scope of executing eval. What we want is js to be executed in the window object, huh? Window, is there anything you can do? A look, ha, there is a window.execScript method, ok, try, success, yeah~ later found that under firefox, can not use window.execScript, look for it, use window.eval, the usage is similar to window.execScript under ie. But when you only use window.eval, there are sometimes problems under ie, so you use both of them.

Here is the js:env.js that implements the remote js security call. I am used to writing js in oo.

/ * * @ author zxub 2006-06-01 * the status information display class is defined with var Status=new function (), and the method can be referenced statically * generally as function Status (), so the method cannot be referenced statically, and the method needs to be referenced through the object * / var Status=new function () {this.statusDiv=null / * initialization status display layer * / this.init=function () {if (this.statusDivested status null) {return;} var body = document.getElementsByTagName ("body") [0]; var div = document.createElement ("div"); div.style.position = "absolute"; div.style.top = "50%"; div.style.left = "50%" Div.style.width = "280px"; div.style.margin = "- 50px 00-100px"; div.style.padding = "15px"; div.style.backgroundColor = "# 353555"; div.style.border = "1px solid # CFCFFF"; div.style.color = "# CFCFFF"; div.style.fontSize = "14px"; div.style.textAlign = "center"; div.id = "status"; body.appendChild (div) Div.style.display= "none"; this.statusDiv=document.getElementById ("status");} / * * set status information * @ param _ message: information to be displayed * / this.showInfo=function (_ message) {if (this.statusDiv==null) {this.init ();} this.setStatusShow (true); this.statusDiv [XSS _ clean] = _ message } / * set whether the status layer displays * @ param _ show: Boolean value, true is displayed, false is not displayed * / this.setStatusShow=function (_ show) {if (this.statusDiv==null) {this.init ();} if (_ show) {this.statusDiv.style.display= "" } else {this.statusDiv [XSS _ clean] = "; this.statusDiv.style.display=" none ";} / * * @ author zxub * A class used to store channel names and communication objects, so that different communication objects can be distinguished by different channel names * / function HttpRequestObject () {this.chunnel=null; this.instance=null } / * * @ author zxub * Communication handling class, you can statically reference the method * / var Request=new function () {this.showStatus=true; / / the cached this.httpRequestCache=new Array () of the communication class; / * create a new communication object * @ return A new communication object * / this.createInstance=function () {var instance=null If (window.XMLHttpRequest) {/ / mozilla instance=new XMLHttpRequest (); / / some versions of Mozilla browsers may make errors when processing content returned by the server that does not contain XML mime-type header information. Therefore, make sure that the returned content contains text/xml information if (instance.overrideMimeType) {instance.overrideMimeType= "text/xml";}} else if (window.ActiveXObject) {/ / IE var MSXML = ['MSXML2.XMLHTTP.5.0',' Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.4.0',' MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'] For (var I = 0; I < MSXML.length; iTunes +) {try {instance = new ActiveXObject (MSXML [I]); break;} catch (e) {} return instance } / * get a communication object * if the channel name is not specified, the default channel name is "default" * if the required communication class does not exist in the cache, create one and put it in the communication class cache * @ param _ chunnel: the channel name. If this parameter does not exist, the default is "default" * @ return a communication object. It is stored in the communication class cache * / this.getInstance=function (_ chunnel) {var instance=null Var object=null; if (_ chunnel==undefined) / / No channel name is specified {_ chunnel= "default";} var getOne=false; for (var iTuno; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.