如何在ajax调用中包含js文件？

Question

我正在调用ajax方法来更新div。 它包含需要java脚本文件的链接和函数。 但是这些方法和函数没有被正确调用，因为java脚本文件没有通过ajax调用包含在内。 例如，我试图调用灯箱功能，但它被重定向到不同的页面而不是灯箱。

在此先感谢Anubhaw Prakash

Answer 1

原型中的Ajax框架将正确执行<script>标记的文本内容，但不会通过<script src="somefile.js"/>导入新的脚本文件。 我想出的唯一解决方案是在页面的头部导入我需要的所有javascript文件。 这样，导入文件中的函数可用于Ajax响应中执行的内联javascript代码。

Answer 2

我有一个类似的问题，我确实想要后载一些JavaScript。 我做的是分离加载html片段并将脚本加载到两个调用中。 为了加载脚本，我调用以下函数（我有JQuery处理ajax部分）：

function loadModule(name, callback) {
    $.ajax({type: "POST"
          , url: "/js/" + name
          , dataType: "script"
          , success: callback
    });     
}

Answer 3

我看到你正在使用Ruby on Rails - 这是否意味着你在客户端使用Prototype？ 如果是这样，Prototype的Ajax.Updater将忽略引用外部文件的脚本标记（它将评估内联内容的脚本标记）。 因此，要将这些外部文件添加到页面中，您必须通过onSuccess回调挂钩进程，在responseText查找具有src属性的脚本标记，并自行处理。 一旦你确定了相关的脚本标记并提取它们的src属性，可以通过动态添加脚本，描述它们包括本文来自非官方的原型和script.aculo.us维基。

Answer 4

写入innerHTML <script>标签不会在写入时执行。 您可以执行element.getElementsByTagName('script')来尝试获取它们并手动执行它们的脚本，但它非常难看且不可靠。

对于写入innerHTML的<script>元素所发生的事情与浏览器的差异很简单，然后（直接或通过祖先）重新插入到文档中。 你想避免这种事情：根本不要将<script>写入innerHTML 。

然后你也不必担心两次执行脚本，这是你不想对库脚本做的事情。 您不希望最终得到一个看起来相同但不比较相等的函数/类的两个副本，并且它们将钩子保持在彼此不能很好地相互作用的页面上。 动态插入的库脚本是混淆失败的一种方法。

更好地静态包含脚本，并在将新元素写入页面后手动将它们绑定到页面元素。 如果你真的需要，你可以让你的AJAX调用获取一个JSON对象，该对象包含要添加的新HTML和要执行的一串字符。

Answer 5

可能想尝试在：before选项中运行一些预备javascript来设置具有正确文件的变量？

Answer 6

嘿，我找到了添加它的方法.... :)

注意 - 这是一个同步过程，所以你不必担心脚本是否加载....脚本将始终加载实例你调用该函数，你可以立即开始使用加载的脚本..

让我们使用这两个功能

1）第一个是ajax函数，用于检索async应为true的值，以便同步发送请求

    // AJAX FUNCTION
    function loadXMLDoc(reqt,url,reqp,cfunc,async)
    {
        var xmlhttp;
        try// code for IE7+, Firefox, Chrome, Opera, Safari
        {
            xmlhttp=new XMLHttpRequest();
        }
        catch(err)// code for IE6, IE5
        {
            try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch(e){
                try{
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch(E){}
            }
        }
        if(!xmlhttp)
        {
            alert("error");
        }
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            cfunc(xmlhttp.responseText);
        }
    }
    if(reqt=='GET')
    {
        url+=(reqp!=""?"?":"")+reqp;
        xmlhttp.open("GET",url,(async?false:true));
        xmlhttp.send();
    }
    else if(reqt=='POST')
    {
        xmlhttp.open("POST",url,(async?false:true));
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send(reqp);
    }
    else
    {
        return false;
    }
    }
    /*use this function
    loadXMLDoc(reqt,url,reqp,function(response){
    });
    */

2）然后我们使用ajax将js文件作为字符串加载，然后将其附加到新脚本标签的innerHTML然后将其附加到head部分，还有一件事要确保文件已经加载我使用了脚本标记的id作为文件的路径，这使得检查重复的任务真的很容易...... :)

    //add new script dynamically
    function add_script(src)
    {
        if(!document.getElementById(src))
        {
            loadXMLDoc("GET",src,"",function(jsresp){
                var head = document.getElementsByTagName("head")[0];
                var script=document.createElement("script");
                script.type='text/javascript';
                script.id=src;
                script.text=jsresp;
                head.appendChild(script);
            },true);
        }
    }

感谢我以前获得的所有帮助，并将从本网站及其用户获取用于开发目的...

关于VIPIN JAIN

Answer 7

1. 在需要使用它们的页面上包含静态脚本（IE包含灯箱，然后包含灯箱脚本）
2. 问题解决了。 不要使用AJAX加载脚本
3. 使用AJAX回调对静态脚本进行必要的函数调用