允许AJAX调用文件中的javascript


Allowing javascripts in an AJAX Called file

我已经阅读了许多允许由AJAX函数调用的脚本的方法,但我有麻烦使其工作,所以如果可能的话,这个特定代码的示例将是伟大的,因为我是相对较新的JS和AJAX。

这是请求更新内容的主要javascript(在索引页中循环)

if (window.XMLHttpRequest)
    xmlhttp2 = new XMLHttpRequest();
} else {
    xmlhttp2 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange = function () {
    if (xmlhttp2.readyState == 4 && xmlhttp2.status == 200) {
        document.getElementById("botcontain2").innerHTML = xmlhttp2.responseText;
    }
}
xmlhttp2.open("GET", "chat/shownew.php?fie=" + Math.random() + "&id=" + id + "&nm=" + nm, true);
xmlhttp2.send();
}

下面是它将在shownewp .php文件中调用的javascript,该文件旨在挂钩到下面的表单

   <script id=runscript2 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
    <script type="text/javascript" id="runscript">
        Ext.onReady(function(){
            Ext.fly('form').on('submit', function(e){
                e.preventDefault();
            var date = Ext.fly('date').dom.value;
            var me = Ext.fly('me').dom.value;
            var them = Ext.fly('them').dom.value;
            var n = Ext.fly('text').dom.value;
            var hi = "submit.php?me="+me+"&them="+them+"&date="+date+"&ty=ty";
                Ext.Ajax.request({
                   url: "chat/insertchat.php?me="+me+"&them="+them+"&date="+date+"&ty=ty",
                   success: function(){ alert(hi); },
                   failure: function() { alert(hi) ; }, 
            params: { text: n }
                });
                return false;               
            });         
        });     
    </script>

是的,这意味着在ajax(shownews .php)调用的同一个文件中挂钩到这个表单

    <form id="form">
    <input id="date" type="hidden" name="date">
    <input id="me" type="hidden" name="me">
    <input id="them" type="hidden" name="them">
    <input id="text" type="text" name="text">
        <input type="submit">
    </form>

现在我无法让shownew。php javascript运行。任何建议都会很好,或者一个简单的例子,告诉我如何做到这一点。

通过XMLHttpRequest加载的脚本标签将不会被评估。就像你说的,你可以往几个方向走。使用图像hack并在父文件中定义您的函数,从这里进行ajax调用。

你可以使用eval(),尽管如果有其他的解决方案,没有人会这样做。

将脚本附加到父文档中。

我通过只更新内部表单段来解决这个问题,所以我的索引页上有这个,而不是在更新的文件中启动表单。虽然它不会在ajax调用后更新脚本,但它是一种变通方法。希望对大家有所帮助。

<form id="form">
<div id=divupdatedbyAJAX>
Ajax information is inserted here.
</div>
</form>

动态加载javascript时,最简单的方法是将其附加为脚本元素(正如Ben Carey在上面的评论中建议的那样)。下面是正常的javascript代码,而不是依赖于JQuery:

function loadJs(file) {
  var head= document.getElementsByTagName('head')[0],
      script=document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.setAttribute("src", file);
  head.appendChild(script);
}

EDIT:您可以在希望加载脚本的地方调用此函数。最好在ajax调用之前立即执行,以便两个请求可以并发运行:

loadJs('runscript2.js');
if (window.XMLHttpRequest)
...

然而,在更仔细地看了你的问题之后,仍然有一个问题。在用新表单更新dom之前,脚本可能会加载。这将阻止脚本工作,因为它假设dom在调用之前已经存在。您可以通过只在dom更新后调用loadJS来解决这个问题,但这会导致表单功能之前不必要的延迟。另一种方法是修改runscript.js,使其读作:

<script id=runscript2 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js"></script>
<script type="text/javascript" id="runscript">
  var runscript2 = function() {
    Ext.fly('form').on('submit', function(e){
    ...
  };
</script>

您可以在操作dom之后调用函数runscript2(在代码片段中没有显示,但可能看起来像这样)

document.getElementById('someDiv').innerHTML=xmlhttp2.responseText;
var runscript2Ready = function() {
  if (typeof runscript2 === 'function') {
    runscript2();
  }
  else {
    setTimeout(runscript2Ready, 50);
  }
}
runscript2Ready();

在这里,在dom被更新之后,我们运行一个函数,如果javascript已经加载,则执行它,如果没有加载,则每隔50毫秒再次尝试一次,直到加载完成。

注:如果我是聪明的,我会说这在开始,但你真的需要动态加载js?为什么不将其包含在原始索引文件中(按照我的建议进行修改),然后在操作dom后调用runscript2函数呢?这样你就不用担心js是否已经加载了。

Note2:如果我更聪明,我会知道一些关于extJS(它似乎你正在使用),但不幸的是,我没有。Ext.onReady方法有可能(但不太可能)做一些比简单地等待dom加载更特殊的事情。在这种情况下,我的代码将失败。更有可能的是ExtJS具有处理尚不存在的dom元素的功能(就像JQuery一样)。这将大大简化您的情况。