【问题标题】:Multiple ajax calls at same time多个ajax同时调用
【发布时间】:2015-08-03 00:43:50
【问题描述】:

我开发了一些网站,但我总是偶然发现一个问题:多个 ajax 调用。我有一个主页,所有内容都是异步加载的。加载页面时,有四个 INDEPENDENT 调用按区域(顶部、左侧、右侧和底部)“绘制”页面,并且在加载时我向用户显示典型的 ajax 旋转。因此,当浏览器收到请求时,我执行回调,并且不同的区域在不同的时间绘制。事实上,服务器的答案有时会混淆,我的意思是,顶部的答案在左侧绘制,反之亦然。

我尝试了一些解决方案,例如在每个请求中创建时间戳,以向浏览器和服务器指示每个请求是不同的。

我也试过在服务器配置缓存的一些参数,以防万一。

唯一可行的方法是将 request2 包含在请求的回调中,等等。

任何人都知道正确的方法或曾经解决过这个问题?我不想做链式请求。

谢谢

这是我的意思的一个例子:

$(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 调用将更新位于布局中特定位置的 HTML 的特定部分。发布一些演示该问题的简单代码。
  • 您是否使用类似 $('#container').append() 的方式将内容添加到您的页面?
  • 是的,我更新了帖子。内容被添加到 DOM,但有时请求以不适当的 id 绘制内容。我知道这很奇怪,因此我通常会执行链请求。感谢您的两个回答。

标签: ajax jquery


【解决方案1】:

关闭

Closures 起初有点令人兴奋。它们是 javaScript 和其他几种现代计算语言的特性。

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

此外,被闭包捕获的变量只能被内部函数访问,而不能被产生闭包的更远的环境访问。例如,即使在没有语言关键字“Public”和“Private”的情况下,此功能也允许我们创建具有私有和公共成员的类类结构。

通过内部函数使用外部变量来抑制 JavaScript 的“垃圾收集”,从而使闭包成为可能,否则会在完成后的某个不确定点破坏外部函数的环境。

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

在函数getData() 下方的代码中,在每次调用时,一个闭包捕获id1id2(和url),匿名ajax 响应处理程序($.get 的第三个参数)仍然可用)。

$(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');

});

因此,我们不是编写四个单独的处理程序,而是利用语言形成闭包的能力并四次调用 same 函数getData()。在每次调用时,getData() 形成一个新的闭包,它允许 $.get 的响应处理程序(在服务器响应时异步调用)处理 DOM 元素。

【讨论】:

  • 我从这个答案中学到了很多东西,但我花了一段时间才弄清楚问题中的原始代码有什么问题。是不是因为变量“数据”实际上是每个调用的相同对象/实例,所以也被内部函数(闭包)重用?我想我有一半预计 JavaScript 运行时会知道在这里创建 4 个单独的对象,因为它们是在那个(有点奇怪的)范围内使用的,并且从未在此之前或之外。很高兴我不必处理我使用的大多数其他语言中那种程度的模糊性。
  • @eselk,9 个月后再次查看此内容,我不确定问题中的代码如何/为什么会混淆。我认为它一定是在我开始回答问题后添加的,我想知道这是否是 OP 自己的解决方案,而不是给出所描述症状的代码。可以肯定的是,四个独立的函数,每个 $.get() 一个,是不必要的。我的getData() 函数简化了事情。一旦你想到了闭包,它们就会非常简单——而且在实践中肯定比你相信的正式定义要简单得多。
  • @Beetroot-Beetroot 我需要在页面加载时同时进行 12 个 ajax 调用。似乎一个响应被复制到另一个响应中。这是由于浏览器对并发调用数的限制吗?
【解决方案2】:

确保每个 ajax 调用都有不同的回调,听起来你正试图对所有四个调用使用相同的函数,因此当它们被乱序调用时(因为它们在服务器端花费不同的时间),他们在错误的地方渲染。如果您坚持对所有回调使用相同的函数,那么您必须在有效负载中放入一些东西,以便回调知道要渲染到哪里。

【讨论】:

  • 单独的功能不是解决这个问题的方法。在闭包中保存一个值非常简单,以确定响应应该去哪里。
  • True Beetroot-Beetroot,但我敢打赌他没有使用 jQuery。
  • 谁说你需要 jQuery 来做闭包?
  • 没有人这么说,甚至我也没有,只是说使用 jQuery 或类似的库,如果您的响应只是一个纯 HTML 片段,您可以在页面中填充元素而无需回调我想他做了什么。我通常使用 json 响应,将变量添加到响应代码、错误消息和有关原始调用的详细信息的响应中,我想这就是您的建议,所以我同意您的看法。
  • {"element":"top","html":"

    你好

    "}
猜你喜欢
  • 2012-06-12
  • 2013-01-28
  • 2017-01-27
  • 1970-01-01
  • 2018-07-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多