这是一个非常简单的原型示例。

它所做的只是在窗口加载时进行的ajax调用,该调用将一些html粘贴到div中。

<html>
    <head>
        <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window, 'load', function(){
                new Ajax.Request('get-table.php', {
                    method:  'get',
                    onSuccess:  function(response){
                        $('content').innerHTML = response.responseText;
                        //At this call, the div has HTML in it
                        click1();
                    },
                    onFailure:  function(){
                        alert('Fail!');
                    }
                });
                //At this call, the div is empty
                click1();
            });

            function click1(){if($('content').innerHTML){alert('Found content');}else{alert('Empty div');}}
        </script>
    </head>
    <body><div id="content"></div></body>
</html>

令人困惑的是Prototype理解div实际上包含东西的上下文。

如果查看ajax调用的onSuccess部分,您会发现此时$('content')。innerHTML中包含内容。

但是,当我在ajax调用之后立即检查$('content')。innerHTML时,它似乎为空。

就我而言,这一定是一些基本的误解。 有人愿意向我解释吗?


编辑
我只想澄清一下。 我意识到Ajax调用是异步的。

这是事情执行的实际顺序,以及为什么让我感到困惑:

  1. 页面加载。
  2. 发出了对get-table.php的Ajax请求。
  3. 发生对onSuccess内部的click1()的调用。 我看到div有内容的警报。
  4. 在Ajax调用之后发生对click1()的调用。 我看到一个警报,指出div为空。

因此,就像代码按编写的顺序执行,但DOM的更新顺序不同。


编辑2因此,简短的答案是将代码放入onSuccess是正确的位置。

要考虑的另一种情况是,先执行Ajax调用,然后从第一个调用的onSuccess进行另一个Ajax调用,如下所示:

new Ajax.Request('foo.php',{
  method:  'get',
  onSuccess:  function(response){
    doAnotherAjaxCall();
  }
  });

function doAnotherAjaxCall(){
  new Ajax.Request('foo.php',{
    method:  'get',
    onSuccess:  function(response){
      //Anything that needs to happen AFTER the call to doAnotherAjaxCall() above
      //needs to happen here!
    }
  });
}

});

===============>>#1 票数:5 已采纳

AJAX的首字母代表“异步”。 这意味着AJAX调用在后台执行,即AJAX请求调用立即返回 这意味着紧随其后的代码通常在onSuccess处理函数被调用之前(甚至在AJAX请求尚未完成之前 )被实际执行。

考虑到您编辑过的问题:在某些浏览器(例如Firefox)中,警报框不像您想象的那样模态化。 即使已经打开了异步代码,异步代码也可能会弹出一个警告框。 在这种情况下,较新的警报框(异步代码中的一个)将显示在较旧的警报框的顶部。 这产生了先执行异步代码的错觉。

===============>>#2 票数:0

无需尝试您的代码:AJAX调用是异步执行的。 这意味着您的Ajax.Request将被触发,然后继续执行click1()调用,该操作将告诉您div为空。 在此之后的某个时刻,Ajax请求完成,内容实际上被放入div中。 此时,将执行onSuccess函数,您将获得所需的内容。

===============>>#3 票数:0

这是异步的Ajax调用。 这意味着在该请求调用之后,响应尚未返回,这就是为什么$('content')仍然为空。

===============>>#4 票数:0

收到get-table.php的响应时,将执行要处理AJAX调用的函数调用的onSuccess元素。 这是一个单独的Javascript函数,当您从get-table.php获得答案时,它告诉浏览器进行调用。 调用AJAX.Request之后,就可以访问AJAX.Request调用下面的代码,但不一定在调用get-table.php之前就可以访问。 因此,是的,我认为AJAX的工作原理存在一些根本性的误解,可能是由于使用了一个库来隐藏细节。

  ask by Mark Biek translate from so

未解决问题?本站智能推荐:

1回复

原型Ajax.Request仅调用最后一个回调

我正在为使用原型的网站编写用户脚本。 我决定使用已经加载的Prototype函数,而不是使用GM库(主要是让我可以轻松地将其重新用于Chrome)。 我正在检查表的行,每行都表示一个唯一用户,方法是检查其个人资料页面上的在线状态元素。 观察在Firebug中执行的脚本,我看到所有
1回复

prototypeJS DOM和AJAX交互

我有一个概念性的DOM问题 - 我希望它有意义。 我的页面(称之为'Main')上有原型JS AJAX更新程序,我正在选择要编辑的记录,并将“页面B”(部分)调用到“主页”页面上的div中。 当我单击部分中的表单时,它会调用'Main'上的函数 - 但是Updater是“Suppos
8回复

使用通配符ID选择div

如何使用它的ID但使用widcard选择div? 如果DIV的ID是statusMessage_1098 ,我想以某种方式选择它,例如document.getElementById('statusMessage_*') 。 这是因为在生成页面之前,我不知道ID的后缀,并且页面中只会出
1回复

为什么从div填充新窗口会删除原始文档中的div?

最近几天,我在用Prototype填充窗口(Resizeable-Draggable Prototype-UI窗口)内容时遇到了一个大问题。 我终于找到了一个我想做的工作示例,但是它使用了某种“ Windows插件”作为原型,但我并没有使用它,所以基本上我只是想问一下如何编译他们的代码以适合普
1回复

将事件侦听器添加到通过AJAX添加到DOM的对象中

我有一组通过Ajax调用添加到文档的复选框 我有一些JavaScript(使用原型) 现在,如果在页面加载时复选框位于页面上,则mousover技巧很有用。 不幸的是,如果我尝试通过AJAX将复选框添加到DOM之后以任何方式调用“ $$”方法,它们中的任何一个都无法获取事件
2回复

原型Event.observe看不到AJAX返回的HTML

我正在尝试使用Prototype的库基于AJAX创建CMS系统。 在页面加载时,我具有HTML,页面标题和通过JSON返回的页面的其他Javascript,并在主区域更新了HTML。 我还有一个事件侦听器,用于侦听要单击的某些ID。 听众正在工作, 加载后,我单击一个新选项卡,
3回复

如何知道页面上是否已加载所有内容?

我正在构建一个包含大量ajax调用的页面并动态创建DOM。 了解所有ajax调用是否已完成以及所有DOM元素是否已完成构建的最佳方法是什么? 我试过跟随prototype.js事件观察者: 但似乎在警报发出后仍有一些元素被加载。 我在IE上尝试这个。
5回复

在DOM元素上使用Javascript的typeof检查未定义(IE问题)

我想遍历DOM元素列表(复选框),并一直持续到定义此列表。 元素是“ c1r1”,“ c1r2”,“ c1r3”等。一旦我碰到一个未定义的元素,我就停下来。 问题似乎是将typeof与DOM元素一起使用。 这是令人反感的代码: 问题的关键是这一行: 我发现的问题是,无论
3回复

用于DOM操作的原型或jQuery(客户端动态内容)

在性能,内存使用等方面,我需要知道这两个JavaScript框架中哪一个对于已知DOM元素(通过id)的客户端动态内容修改更好。 Prototype的$('id')。更新(内容) jQuery的jQuery('#id')。html(内容) 编辑:我在问题的最后澄清了我真
2回复

将DIV元素移动到父级的底部(作为最后一个子级)

我正在尝试为我正在开发的网站的主页顶部创建一个不断旋转的横幅。 我可以设想保持它不断旋转的最好方法是获取第一个DIV(firstChild)并在它滑出视图后将其移动到堆栈的末尾。 这个: 应该成为这样的: 我使用Prototype框架......我试图通过使用我自己的方法