按需javascript

Question

我想知道你们是否可以帮助我使用AJAX执行按需javascript？ 如果您能通过一个简单的例子帮助我，我将不胜感激。

我的问题是：如何从服务器中获取JavaScript代码并执行它？

谢谢您的帮助

Answer 1

实际上，您甚至不需要为此使用AJAX。 只需在您的身体上添加一个新的<script>元素即可。

普通的旧Javascript ：

var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/scripts/example.js';

document.body.appendChild(newScript);

这是使用jQuery的相同代码：

// Traditional
$(document.body)
  .append('<script type="text/javascript" src="/scripts/example.js" />');

// Using getScript
$.getScript('/scripts/example.js');

这是使用MooTools的相同代码：

// Traditional
new Element('script', {type: 'text/javascript',
                       src: '/scripts/example.js'}
           ).inject(document.body);

// Using Assets (Recommended)
new Asset.javascript('/scripts/example.js');

Answer 2

如果您确实想使用AJAX（如问题所述），也可以这样做。 首先，通常使用XMLHttpRequest下载javascript，下载完成后，您可以eval（）或将其插入生成的标记中。

function xhr_load(url, callback) {
  xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        callback(xhr.responseText);
      } 
    }
  }
  xhr.open("GET", url, true);
  xhr.send(null);
}

// (1) download using XHR and execute using eval()
xhr_load('mylib.js', function(response) {
  eval(response.responseText);
});

// (2) download using XHR and execute as an inline script
xhr_load('mylib.js', function(response) {
  var script = 
    document.createElement('script');
    document.getElementsByTagName('head')[0].appendChild(script);
    script.text = response.responseText;
});

此外，史蒂夫·索德斯（Steve Souders）在这一领域做得非常出色，我强烈建议您观看他在这段视频中的讲话。

Answer 3

我做了以下功能以能够以编程方式加载JavaScript文件：

用法：

loadScript('http://site.com/js/libraryXX.js', function () {
  alert('libraryXX loaded!');
});

实现方式：

function loadScript(url, callback) {
  var head = document.getElementsByTagName("head")[0],
      script = document.createElement("script"),
      done = false;

  script.src = url;

  // Attach event handlers for all browsers
  script.onload = script.onreadystatechange = function(){
    if ( !done && (!this.readyState ||
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      callback(); // execute callback function

      // Prevent memory leaks in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };
  head.appendChild(script);
}

我使用了一个回调函数参数，该参数将在脚本正确加载后执行。

还请注意， script元素在加载后已从head移除，我通过将它们设置为null来移除load和readystatechange事件，以防止IE上的内存泄漏。

在此处检查示例用法。

Answer 4

我使用此代码按需加载（使用jQuery）。 它的阻塞（但我需要它）可以使用async:true使其同步

(function(script) {
    var included_files = new Array();
    this.include = function(script) {
        var js_base = '/js/';
        if (_.indexOf(included_files, script) == -1){
            included_files.push(script);
            $.ajax({
                url: js_base+script.split('.').join('/')+'.js',
                type: 'get',
                dataType: 'script',
                async: false,
                global:false,
            });
        }
    };
})();

它使用jQuery的和Underscore.js为.indexOf但你可以ommit后者用自己的indexOf功能。
祝好运。

Answer 5

从包含在标签中的服务器获取JavaScript代码，将其附加到DOM中并执行一个函数。 要执行的功能名称可能带有相同的请求，也可以预定义。

这需要什么？ 也许如果您可以详细说明自己的目标，则可以找到一种更直接的方法。

Answer 6

Javascript可通过以下两种方式从Web服务器获取到用户的浏览器：

• 它与<script>标记中的HTML一起嵌入网页中。
• 它与网页一起作为单独的文件发送。 javascript文件的文件扩展名为.js。 网页<script>标记中的代码可以调用此单独的.js文件中的代码
• 可以使用这些的组合。 .js文件中包含许多网页上常用的javascript函数。 仅在一个网页上使用的JavaScript会在该网页上显示。

Answer 7

CMS显示了一种可靠的（外观尚未测试）独立于库的方法。 这是在Dojo中的操作方法。

dojo.require("namespace.object");

您可能需要指定名称空间的路径（即：根文件夹）

dojo.registerModulePath("namespace", "../some/folder/path");

有关更多信息，请参阅文档 。