多个Ajax post调用 - 将它们链接起来,以便在第一次成功之后调用下一个ajax post

Question

这个问题试图证实我的理解以及如何最好地解决手头的情况.

在我的应用程序中,假设我有五个容器,每个容器都有自己的数据源URL.

加载页面后,所有五个都需要询问服务器,检索数据并显示它.

目前,只要加载页面,我就会为循环中的每个容器触发jquery ajax.post方法.循环立即执行,在Firebug中我将所有这些ajax请求视为"处理"

现在我的理解是javascript是单线程的,所以所有这些ajax请求仍然在浏览器的执行队列中,对吧？

我想要的是,尽管我在一个循环中解雇了所有5个ajax发布请求,但它应该一个接一个地命中服务器.

例如,第一个Ajax调用成功或失败 - >调用第二个ajax post - 等待成功或失败,然后触发第三个ajax帖子,依此类推.

我不想使用5个并行的ajax调用来访问服务器,因此我想确认循环中所有这5个容器的ajax.post不是并行操作.

如果由于某种原因某些浏览器有可能进行并行请求,那么我想实现一个简单的链接机制,我可以使用每个ajax帖子的回调函数来实现它.

我查看了jquery队列函数,但对同一个对象的调用是q'd.在我的情况下,我需要以顺序方式在不同对象上调用相同的函数.

如果你能告诉我什么是最佳实践,以及我的假设和理解是否需要更正.

谢谢

Answer 1

Ajax代表 异步 JavaScript和XML.是的异步.

如果要禁用异步方式,可以将async属性设置为false;

$.ajax({
        async: false,
        // ...
        success: function(data) {
           //do whatever with your data
        }
    });

编辑:以下是示例及其输出.

HTML

<div id="div1"></div>   

情况1 :

我没有将asyn属性设置为false.所以它将使用默认值(即:async = true.ajax调用将是异步的).

<script type="text/javascript">
    $(function () {
        for (var i = 0; i < 3; i++) {               
            $.ajax({
                url: 'ajaxserverpage.aspx',
                cache: false,                   
                success: function (data) {                       
                    $("#div1").append(data);                     
                }
            });
        }
    });    
</script>

我在我的ajax调用中调用了一个aspx页面.我的aspx页面将只返回当前的datetime值.我把它附加到我的div.我Thread.Sleep(2000)在我的aspx页面中有一个声明,要求在响应中施加2秒的延迟(以演示响应时间差异).

ajaxserver.aspx页面后面的代码

 protected void Page_Load(object sender, EventArgs e)
 {
     Thread.Sleep(2000);
     Response.Write("<br/>created at "+DateTime.Now.ToString());
     Response.End();
 }

让我们看看它是如何工作的.

这是我的输出.

当我检查萤火虫时,我能看到这一点.

你可以看到我们有3次调用我的服务器页面,它们都是同时启动的.第二个不是等待第一个完成.

案例2

我将async属性值设置为false.

$(function () {
            for (var i = 0; i < 3; i++) {               
                $.ajax({
                    url: 'ajaxserverpage.aspx',
                    cache: false,
                    async:false,
                    success: function (data) {                       
                        $("#div1").append(data);                     
                    }
                });
            }
        }); 

结果是

而萤火虫的结果是

您可以看到第二个请求在第一个请求完成后开始,第三个请求在第二个请求之后开始.

希望这可以帮助.