管理多个ajax请求的正确方法是什么？

We've all seen some examples in AJAX tutorials where some data is sent. They all (more or less) look like:

我们都在AJAX教程中看到了一些发送一些数据的例子。他们都（或多或少）看起来像：

var http = createRequestObject(); // shared between printResult() and doAjax()

function createRequestObject() { /* if FF/Safari/Chrome/IE ... */ ... }

function printResult() 
{ 
    if (http.readyState == 4) { ... } 
}

function doAjax() {
    var request = 'SomeURL';
    http.open('post', request);
    http.onreadystatechange = printResult;
    data = ...; // fill in the data
    http.send(data);
}

// trigger doAjax() from HTML code, by pressing some button

Here is the scenario I don't understand completely: what if the button is being pressed several times very fast? Should doAjax() somehow re-initialize the http object? And if if the object is re-initialized, what happens with the requests that are being already on air?

这是我不完全理解的场景：如果按钮被快速按下几次怎么办？应该doAjax（）以某种方式重新初始化http对象？如果对象被重新初始化，那么已经播出的请求会发生什么？

PS: to moderator: this question is probably more community-wiki related. As stated here (https://meta.stackexchange.com/questions/67581/community-wiki-checkbox-missing-in-action) - if I've got it right - please mark this question appropriately.

PS：主持人：这个问题可能与社区维基有关。如此处所述（https://meta.stackexchange.com/questions/67581/community-wiki-checkbox-missing-in-action） - 如果我做对了 - 请正确标记这个问题。

3 个解决方案

#1

Since AJAX has asynchronus nature, with each button click you would raise async event that would GET/POST some data FROM/TO server. You provide one callback, so it would be triggered as many times as server finishes processing data.

由于AJAX具有异步特性，因此每次按下按钮都会引发异步事件，从而将某些数据从FROM / TO服务器获取/ POST。您提供一个回调，因此它将在服务器完成处理数据时被触发多次。

It is normal behaviour by default, you should not reinitialize of http object. If you want to present multiple send operation you have to do that manually (e.g. disabling button as first call being made).

默认情况下这是正常行为，您不应重新初始化http对象。如果要呈现多个发送操作，则必须手动执行此操作（例如，在首次调用时禁用按钮）。

I also suggest to use jQuery $.ajax because it incapsulate many of these details.

我还建议使用jQuery $ .ajax，因为它包含了许多这些细节。

#2

Sure that numerous libraries exist nowadays that perform a decent job and should be used in production environment. However, my question was about the under-the-hood details. So here I've found the lamda-calculus-like way to have dedicated request objects per request. Those object will obviously be passed to the callback function which is called when response arrives etc:

当然，现在有许多图书馆可以执行一项体面的工作，并且应该在生产环境中使用。但是，我的问题是关于引擎盖下的细节。所以在这里我发现了类似于lamda-calculus的方法，每个请求都有专用的请求对象。这些对象显然会传递给回调函数，该函数在响应到达时调用：

function printResult(http) {
  if (http.readyState == 4) { ... } 
  ...
}

function doAjax() {
    var http = createRequestObject();       
    var request = 'SomeURL';

    http.open('get', request);      
    http.onreadystatechange = function() { printResult(http); };
    http.send(null);
    return false; 
}

Successfully tested under Chrome and IE9.

在Chrome和IE9下成功测试。

#3

I've used a per-page request queue to deal with this scenario (to suppress duplicate requests and to ensure the sequential order of requests), but there may be a more standardized solution.

我已经使用每页请求队列来处理这种情况（以抑制重复请求并确保请求的顺序），但可能有更标准化的解决方案。

Since this is not provided by default, you would need to implement it in JavaScript within your page (or a linked script). Instead of starting an Ajax request, clicking a button would add a request to a queue. If the queue is empty, execute the Ajax request, with a callback that removes the queued entry and executes the next (if any).

由于默认情况下不提供此功能，因此您需要在页面（或链接脚本）中的JavaScript中实现它。单击按钮会向队列添加请求，而不是启动Ajax请求。如果队列为空，则执行Ajax请求，使用回调删除排队的条目并执行下一个（如果有的话）。

另请参见：如何使用jQuery实现ajax请求队列

#1