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

Question

这个问题试图确认我的理解以及如何最好地解决当前的情况。

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

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

目前，一旦页面加载，我就会在循环中为每个容器触发 jquery ajax.post 方法。循环立即执行，在 Firebug 中我将所有这些 ajax 请求视为“正在处理”

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

我想要的是，即使我在一个循环中触发了所有 5 个 ajax post 请求，它也应该只一个接一个地到达服务器。

例如第一个 Ajax 调用成功或失败 --> 调用第二个 ajax post --等待成功或失败，然后触发第三个 ajax post 等等。

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

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

我查看了 jquery 队列函数，但调用是针对同一对象的。就我而言，我需要按顺序在不同对象上调用相同的函数。

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

谢谢

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 页面将仅返回当前日期时间值。我将其附加到我的 div 中。我的 aspx 页面中有一个 Thread.Sleep(2000) 语句，用于在响应中施加 2 秒的延迟(以演示响应时间差异)。

ajaxserver.aspx页面的代码

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

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

这是我的输出。

当我检查 Firebug 时，我可以看到这一点。

您可以看到我们对我的服务器页面进行了 3 个调用，并且全部同时开始。第二个调用不会等待第一个调用完成。

案例2

我要将异步属性值设置为 false。

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

结果是

Firebug 结果是

您可以看到，第二个请求在第一个请求完成后开始，第三个请求在第二个请求完成后开始。

希望这有帮助。