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;
});

此外，史蒂夫·索德斯在这个领域做得非常出色，我强烈建议观看他的演讲video。

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移除，我会将load和readystatechange事件设置为null }，这是为了防止IE上的内存泄漏。

检查示例用法here。

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,
            });
        }
    };
})();

它对.indexOf使用jQuery和Underscore.js，但您可以使用自己的indexOf函数省略后者。
祝你好运。

Answer 5

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

这需要什么？也许如果你能详细说明你的目标，可以找到一种更简单的方法。

Answer 6

Javascript通过以下几种方式从Web服务器传输到用户的浏览器：

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

Answer 7

CMS已经展示了一个可靠的（看起来，未经测试）库独立方法。以下是你在Dojo中的表现。

dojo.require("namespace.object");

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

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

有关详细信息，请参阅the doc。

按需javascript

7 个答案: