在同一时间多个AJAX调用 [英] Multiple ajax calls at same time

问题描述

我已经开发了一些网站，我总是蹒跚一个相同点：多个Ajax调用。我有，所有的内容是异步加载一个主页。当页面加载时，有四个独立的呼叫，通过区域画的页面（顶部，左侧，右侧和底部），并同时被载入我告诉典型的AJAX旋转的用户。所以，接收到浏览器的请求时予执行回调和不同区域在不同的时间绘制。事实是，服务器的答案，有时混在一起，我的意思是，上面的答案被绘制在左侧，反之亦然。

I have developed some websites and I always stumble a the same point: multiple ajax calls. I have a main page where all the content is loaded asynchronously. When the page is loaded, there are four INDEPENDENT calls that "draw" the page by areas (top, left, right and bottom) and while it is loaded I show to the user the typical ajax spins. So, when a request is received by the browser I execute the callback and the different areas are drawing at different time. The fact is that the answer for the server sometimes are mixed up, I mean, the answer of top is drawn in the left or vice-versa.

我已经尝试了一些解决方案，如建立在每个请求时间戳以指示浏览器和服务器的每个请求是不同的。

I've tried some solutions like creating a timestamp in each request to indicate to the browser and server that each request is different.

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

Also I've tried to configure some parameters of cache in the server, in case.

在其中工作的唯一方法已经包括一中，等回调的请求2。

The only way in which works has been including the request2 in the callback of the one, etc.

任何人都知道正确的方法做，或曾经击败这个问题？我不想做链接的请求。

Anyone knows the proper way to do it or ever has beaten this issue?? I don't want to do chained request.

感谢

下面是我的意思的例子：

Here is an example of what I mean:

$(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。

And the html is a simple jsp with four container each one with a different id.

推荐答案

CLOSURES

瓶盖有点令人兴奋的在第一。他们是JavaScript和其他一些现代计算机语言的一个特征。

Closures are a little mind-blowing at first. They are a feature of javaScript and several other modern computing languages.

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

A closure is formed by an executed instance of a function that has an inner function (typically an anonymous event handler or named method) that needs access to one or more outer variables (ie. variables that are within the outer function but outside the inner function). The mind-blowing thing is that the inner function retains access to the outer variables even though the outer function has completed and returned at the time that the inner function executes!

此外，被困在一个封闭的变量都可以访问的只有的为内部函数，而不是带来封闭应运而生进一步淘汰环境。此功能允许我们，例如，即使没有语言关键字的公与私。创建私有类状结构，以及公共成员

Moreover, variables trapped by a closure are accessible only to inner functions and not to the further-out environment that brought the closure into being. This feature allows us, for example, to create class-like structures with private as well as public members even in the absence of language keywords "Public" and "Private".

闭包是通过内部函数使用外部变量燮pressing JavaScript的垃圾收集，否则将破坏外部函数的环境中完成后的一些不确定点成为可能。

Closures are made possible by inner functions' use of outer variables suppressing javaScript's "garbage collection" which would otherwise destroy the outer function's environment at some indeterminate point after completion.

封好，整齐JavaScript编程的重要性不能被过分强调。

The importance of closures to good, tidy javaScript programming cannot be overstressed.

在功能下面的code 的getData（）的形式，在每次调用，闭包捕获 ID1 和 ID2 （和网​​址），这仍然可以匿名Ajax响应处理程序（$不用彷徨的第三个参数） 。

In the code below the function getData() forms, at each call, a closure trapping id1 and id2 (and url), which remain available to the anonymous ajax response handler ($.get's third argument).

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

});

因此​​，而不是写四个独立的处理器，我们利用形成封闭和调用的一样的功能，语言的能力，的getData（），四次。在每次调用的getData（）形成了一个新的闭包，它允许$不用彷徨的响应处理程序（称为异步当服务器响应）来解决的及其 DOM元素。

Thus, rather than writing four separate handlers, we exploit the language's ability to form closures and call the same function, getData(), four times. At each call, getData() forms a new closure which allows $.get's response handler (which is called asynchronously when the server responds) to address its DOM elements.

这篇关于在同一时间多个AJAX调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！