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

Question

我们都已经在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

这是我不完全了解的情况：如果快速按几次按钮该怎么办？ doAjax（）是否应该以某种方式重新初始化http对象？ 如果对象被重新初始化，那么已经在播出的请求又会如何呢？

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

Answer 1

由于AJAX具有异步特性，因此每次单击按钮都会引发一个异步事件，该事件将在FROM / TO服务器中获取/发布一些数据。 您提供了一个回调，因此它将在服务器完成数据处理后被触发多次。

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

我还建议使用jQuery $ .ajax，因为它封装了许多这些详细信息。

Answer 2

确保当今存在无数的图书馆，它们执行得体的工作，应在生产环境中使用。 但是，我的问题是关于引擎盖下的细节。 所以在这里，我发现了类似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; 
} 

在Chrome和IE9下成功测试。

Answer 3

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

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

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