同时进行多个ajax调用

我开发了一些网站，但我总是遇到一个相同的问题：多个ajax调用。我有一个主页，其中所有内容都是异步加载的。加载页面时，有四个独立的调用按区域（顶部、左侧、右侧和底部）“绘制”页面，在加载页面时，我向用户显示典型的ajax旋转。因此，当浏览器收到请求时，我执行回调，不同的区域在不同的时间绘制。事实上，服务器的答案有时是混淆的，我的意思是，top的答案在左边画，反之亦然

我尝试过一些解决方案，比如在每个请求中创建一个时间戳，以向浏览器和服务器表明每个请求都是不同的

此外，我还尝试在服务器中配置缓存的一些参数，以防万一

唯一可行的方法是将request2包含在1的回调中，等等

任何人都知道正确的方法，或者曾经解决过这个问题？？我不想做连锁请求

谢谢

以下是我的意思的一个例子：

$(document).ready(function() {

$.get('/activity',Common.genSafeId(),function(data){$('#stream').html(data);$("#load_activity").addClass("empty");});
$.get('/messages',Common.genSafeId(),function(data){$('#message').html(data);$("#load_messages").addClass("empty");});
$.get('/deals',Common.genSafeId(),function(data){$('#new_deals_container').html(data);$("#load_deal").addClass("empty");});
$.get('/tasks',Common.genSafeId(),function(data){$('#task_frames').html(data);$("#load_task").addClass("empty");});});

---

html是一个简单的jsp，有四个容器，每个容器都有不同的id。

确保每个ajax调用都有不同的回调，这听起来像是在尝试对所有四个容器使用相同的函数，因此当它们被无序调用时（因为它们在服务器端花费的时间不同），他们在错误的地方渲染。如果您坚持对所有回调使用相同的函数，那么您必须在有效负载中放入一些内容，以便回调知道渲染到哪里。

闭包

一开始你有点激动人心。它们是javaScript和其他几种现代计算语言的一个特性

闭包是由具有内部函数（通常是匿名事件处理程序或命名方法）的函数的已执行实例形成的，该函数需要访问一个或多个外部变量（即外部函数内但内部函数外的变量）。令人兴奋的是，即使外部函数在内部函数执行时已完成并返回，内部函数仍保留对外部变量的访问权

此外，闭包捕获的变量只能访问内部函数，而不能访问导致闭包形成的外部环境。例如，此功能允许我们创建具有private和public成员的类结构，即使没有语言关键字“public”和“private”

闭包是通过内部函数使用外部变量来实现的，外部变量抑制javaScript的“垃圾收集”，否则会在完成后的某个不确定点破坏外部函数的环境

闭包对于良好、整洁的javaScript编程的重要性怎么强调都不过分

在函数

getData（）

下面的代码中，在每次调用时，都会出现一个闭包捕获

id1

和

id2

（和

url

），匿名ajax响应处理程序（$.get的第三个参数）仍然可以使用这些闭包

---

因此，我们没有编写四个单独的处理程序，而是利用语言的能力来形成闭包并四次调用同一个函数，

getData（）

。每次调用时，

getData（）

都会形成一个新的闭包，允许$.get的响应处理程序（在服务器响应时异步调用）处理其DOM元素。

什么意思，答案绘制在错误的位置？如果构造得当，Ajax调用将更新布局中非常特定位置的HTML的非常特定部分。发布一些简单的代码来演示这个问题。是否使用类似$（“#container”）的东西将内容添加到页面中。append（）？是的，我更新了帖子。内容被添加到DOM中，但有时请求会以不适当的id绘制内容。我知道这很奇怪，因此我通常执行链请求。谢谢你的两个答案。单独的函数不是解决这个问题的方法。在闭包中保存一个值，以确定响应的方向非常简单。没错，但我打赌他没有使用jQuery。谁说你需要jQuery来完成闭包？没人这么说，即使是我，只是说使用jQuery或类似的库，如果您的响应只是一个纯HTML片段，那么您可以在页面中填充元素，而无需回调，我想他就是这么做的。我通常使用json响应，向响应中添加变量，包括响应代码、错误消息和原始调用的详细信息，我想这是您的建议，因此我同意您的意见。{“element”：“top”，“html”：“Hello

”}我从这个回答中学到了很多，但我花了一段时间才弄清楚问题中的原始代码到底出了什么问题。是否因为变量“data”实际上是每个调用的同一对象/实例，所以内部函数（闭包）也会重用它？我猜我有一半的期望JavaScript运行时会知道在这里创建4个独立的对象，因为它们在那个（有点奇怪）范围内使用，而且从来没有在那个范围之前或之外使用过。当然很高兴我不用处理我所使用的大多数其他语言中的那种模糊程度。@eselk，9个月后再看一遍，我不确定问题中的代码是如何/为什么会把事情搞混的。我想它一定是在我开始回答这个问题后添加的，我想知道这是OP自己的解决方案，而不是给出所描述症状的代码。可以肯定的是，四个独立的函数是不必要的，每个

$.get（）

。我的

getData（）

函数简化了事情。一旦你想好了闭包，它们就非常简单了——而且在实践中肯定比正式定义要简单得多。@Beetroot Beetroot我需要同时进行12个ajax调用

$(document).ready(function() {

    function getData(url, id1, id2) {
        $.get(url, Common.genSafeId(), function(data) {
            $(id1).html(data);
            $(id2).addClass("empty");
        });
    }

    getData('/activity', '#stream', '#load_activity');
    getData('/messages', '#message', '#load_messages');
    getData('/deals', '#new_deals_container', '#load_deal');
    getData('/tasks', '#task_frames', '#load_task');

});