按需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");

有關更多信息，請參閱文檔 。