如何按请求的顺序处理 jquery ajax 请求答案

【问题标题】：How to process jquery ajax requests in the order they were requested如何按请求的顺序处理 jquery ajax 请求
【发布时间】：2012-04-12 00:53:49
【问题描述】：

我正在制作一个检查域名列表的 java servlet 页面，并通过 jquery ajax 请求检查每个名称。它工作正常，只是结果被乱序附加到 DOM 中。什么是按请求顺序处理请求的最佳方法，但也像长轮询效果一样异步。我是 javascript 新手。

这是我用于请求的代码：

$.ajax({
    async:true,
    type:'GET',
    url:servlet,
    success:function(data){
        $('p').append(data+"<br>");
    }, 
});

我正在考虑向 java servlet 发送一个序列号，它会通过 JSON 返回它，但我想知道是否有更简单的方法。

【问题讨论】：

你在success 之后得到了一个流浪的,。只是将您从未来的错误中拯救出来。
首先想到的是在发出 AJAX 请求之前为每个响应创建容器，然后让回调使用该容器。

标签： javascript jquery ajax

【解决方案1】：

我要做的是提前为响应创建容器，然后在它周围绑定回调（实际上不像在 bind() 函数中那样绑定）。

例如，假设您有一个类似<div id="container"></div> 的容器，您可以执行以下操作：

function makeRequest(something) {
    var target = $("<div></div>");
    $("#container").append(target);
    $.get("", {something: something}, function(data) {
        target.html(data);
    });
}

就灵活性而言，这是一个相当糟糕的例子，但它应该说明这一点。它在发出请求之前向容器添加一个 div，然后使用该 div 将响应推送到其中。这意味着 div 将按照发出请求的顺序附加。您可以扩展这个想法以使用样式使其看起来像 div 在填充之前不存在，或者您可以在其中包含“正在加载”消息。

（另外，something 参数的数据传递相当糟糕，但希望你明白这一点。）

【讨论】：

我得到了这个工作谢谢！我有一个计数器正在运行，我使用该计数器将一个 attr 名称附加到 div 中，并且在成功的情况下，我使用该计数器对 div 进行了 DOM 查询。 :)

【解决方案2】：

我猜你的问题是浏览器向服务器发送尽可能多的 AJAX 请求，服务器尽可能地回答它们。很可能服务器只是比其他服务器更快地响应一些请求，因此尽管请求是按顺序发送的，但您却将它们弄乱了。

解决此问题的方法是让您的查询按顺序发送，以确保返回的答案是连续的。本质上，做一个 AJAX 调用，在调用成功后，你就可以启动第二个 AJAX 调用，等等......

【讨论】：

【解决方案3】：

您可以对发送到服务器的请求进行排序、缓存结果并仅按顺序添加它们

next_to_request = 0;
next_to_append = 0;
results = [];
function reqToServer(){
  var e = next_to_request++;

  $.ajax({
    async:true,
    type:'GET',
    url:servlet,
    success:function(data){
        results[e] = data;
    }, 
  }); 
function loadAnswers(){
   if (results[next_to_request]){
     data = results[next_to_request];
     next_to_request++;
     $('p').append(data+"<br>");
   }
}

setTimeout(100, loadAnswers);

这有一个不同的线程来显示结果，并且只以正确的顺序显示。

【讨论】：

最喜欢的解决方案，在数组中缓存，但为什么需要 setTimeOut？

【解决方案4】：

从 Ajax 函数本身中取出成功函数，并将成功函数链接起来，它们将按顺序触发，如果一个请求尚未完成，它将等待它完成后再触发下一个请求。

一个非常简单的方法就是这样做：

var firstOne = $.ajax({
    async:true,
    type:'GET',
    url:servlet
}); 

var SecondOne = $.ajax({
    async:true,
    type:'GET',
    url:servlet
}); 

firstOne.done(function(data){
    $('p').append(data+"<br>");
    SecondOne.done(function(data){
        $('p').append(data+"<br>");
    }); 
});

对于更高级的方法，了解promises 的工作原理是个好主意！

这比顺序发送 ajax 请求要快得多，在下一个开始之前等待最后一个完成，因为这将在浏览器可用时发送所有请求，并且链接 done() 函数将等待任何没有完成的，只要按照你放入的顺序执行那些到达时立即完成的内容，然后内容将以正确的顺序附加。如果进行许多 ajax 调用，使用 Promise 和 $.when/$.then 将让您通过迭代等构建更合理的函数。

【讨论】：