优先考虑AJAX调用

我正在制作一份调查问卷，询问有关大约400个位置的信息。每个地点需要有10到40个问题。在位置概览中，我想显示是否给出了所有必需的答案，但是确定此问题每个位置需要几乎半秒。这使得加载页面太长了。这已经通过用下面的代码异步检索位置状态解决（现在）：优先考虑AJAX调用

$(function() { // On document load 
     $('.location').each(function() { 
      var locationId = $(this).data('location_id'); 
      $.ajax({ 
       type: 'GET', 
       url: '/location/' + locationId + '/complete', 
       success: function (result) { 
        var locWait = $('#comp_l' + locationId + 'wait'); 
        locWait.hide(); // Hide loading spinner 
        if (result == 'true') { 
         var locYes = $('#comp_l' + locationId + 'yes'); 
         locYes.show(); // Show completion mark 
        } else { 
         var locNo = $('#comp_l' + locationId + 'no'); 
         locNo.show(); // Show incomplete mark 
        } 
       } 
      }); 
     }); 
    });

上面的代码使得网站负载显著更快（2秒而不是2分钟）和（中）完成标记出现在下面的时间。

到目前为止，这是所有工作按需要。当用户尝试加载位置详细信息时会出现问题。细节使用这个函数加载：

function load(id) { 
     var detailPane = $('#detail_pane'); 
     detailPane.html('<h3><span class="fa fa-pulse fa-spinner"></span> Loading location details</h3>'); 

     $.ajax({ 
      type: 'GET', 
      url: '/location/' + id + '/details/', 
      success: function (html) { 
       detailPane.html(html).show(); 
       draw(); // Does some final checks on the detailPane 
      }, 
      error: function (error) { 
       detailPane.html('<h3>Could not retrieve location details</h3><br><p>' + JSON.stringify(error, null, 4) + '</p>'); 
      } 
     }); 
    }

由于仍有调用到有关地点完成后端制造，所有的痕迹都被正确绘制后的细节只会加载。有什么方法可以确保细节能及时加载吗？

来源

2017-05-02 Dr Ivol

代替发送（可能）40个AJAX请求并泛滥您的服务器，将所有'locationId'放入一个数组并发送一个请求。你目前的逻辑基本上是DDOSing –

我同意@RoryMcCrossan，为什么不只是有一个** API请求，并让服务器找出问卷是否已完成。 –

至少有三种方法是：

发送40个独立的AJAX请求到服务器，而不是，送一个与你想要的40个城市名单。大多数浏览器和服务器允许浏览器和服务器之间至少有两个连接，所以如果这个调用非常好，它不应该阻止一个额外的Ajax调用（但你的里程可能会有所不同，总是测试确定）。服务器可能会在一个会话中序列化调用，所以如果需要的话，您需要允许。
或者，每次只使用一个队列执行一个ajax请求（当前一个请求完成时开始下一个请求），并且当您需要加载用户请求的信息时，将其放在队列的前端。然后它只会等待当前正在运行的请求完成，而不是全部完成。
使用套接字I/O而不是40个位置的ajax请求。但那可能是一个大锤子。

来源

2017-05-02 09:25:43

优先考虑AJAX调用

回答

相关问题