javascript - 如何异步加载包含 ajax 调用的 javascript 文件？

Question

我有一个名为 JScript.js 的 JavaScript 文件，该文件包含下面的函数，即对 dot-net 页面的 ajax 调用

alert('jscript.js called');

function AddTag() {
var htag = document.getElementById("hdntag").value.split('|');
var texttag = document.getElementById("taginput").value;

for (i = 1; i < htag.length; i++) {
    var onetag = htag[i].split(',');

    if (onetag[0] == texttag) {
        alert("Already Exist!!!");
        return false;
    }
}
$(document).ready(function () {
    $.ajax
                           ({
                               type: "POST",
                               url: "Checked.aspx/AddTag",
                               data: "{'TagName': '" + $('#taginput').val() + "'}",
                               contentType: "application/json; charset=utf-8",
                               dataType: "json",
                               async: true,
                               cache: false,
                               success: function (msg) {
                                   document.getElementById("hdntag").value += '|' + texttag + ',' + msg.d;
                                   Makeedittabletaghtml();
                               }
                           })
});
document.getElementById("taginput").value = "";

}

我正在尝试将此 JavaScript 文件异步加载到页面中，但我只收到警报，即“调用 jscript.js”，但下面的函数不执行是异步加载 JavaScript 文件的代码

 (function() {
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.src = 'JScript.js';
    dsq.async = true;
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

但是当我将文件包含到页面中时，它运行并执行得很好

<script type="text/javascript" src="JScript.js"></script>

Answer 1

Farhan Ahmad 已经回答了，无论如何， document.ready 仅在您加载页面并且 dom 准备好时触发，所以首先让您JScript.js如下

alert('jscript.js called');

function AddTag() {...}

function myReadyFunc(){
    $.ajax({
    ...
    ...
    });
}

然后用于$.getScript加载文件并调用你的myReadyFunc()哪个将调用ajax

$.getScript("JScript.js", function(){
    alert("Script loaded and executed.");
    myReadyFunc();
});

参考： 这里。

Answer 2

您可以使用.getScript() jQuery 函数来执行此操作：

$.getScript("JScript.js", function(){
   alert("Script loaded and executed.");
   // here you can use anything you defined in the loaded script
});