AJAX 多重响应答案

【问题标题】：AJAX multiple responsesAJAX 多重响应
【发布时间】：2018-09-09 11:10:41
【问题描述】：

我现在正在深入研究 JavaScript 和 AJAX 技术，我对 AJAX 和 POST 非常了解。现在我想知道我的 PHP 代码（在本例中为 Laravel 控制器）广播到的广播频道之类的东西，然后由客户端的 JavaScript 接收以进行操作，比如这样的过程：

用户点击一个按钮，按钮内会显示一个微调器。在按钮旁边，有一个状态标签，指示当前正在处理的进程/任务。最后，按钮变成了链接或其他东西。所以，我现在想要的是我可以多次更新状态，因为我当前的 AJAX 代码在进程结束时只会收到一条消息或一种状态，仅此而已，两者之间没有任何关系：

$.ajax({
   url: "/admin/test",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    method: 'POST',
    dataType: 'json',
    data: {
        id: whatever
    },
    success: function(result)
    {
        console.log(result.status);
    }
});

现在我想知道这进一步如何运作。

【问题讨论】：

你应该看看 websockets
如果服务器需要在不同的时间发回多个东西，如果你想使用XMLHttpRequest，那就是多次调用。
可能想研究 SSE：developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/…

标签： javascript php ajax laravel-5.5

【解决方案1】：

你可以利用ajax的beforeSend事件来启动一个进度条，完成后你可以将进度条宽度设置为100%

$.ajax({
    url: "/admin/test",
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    method: 'POST',
    dataType: 'json',
    data: {
        id: whatever
    },
    beforeSend : {
        // start progress bar
    },
    success: function(result)
    {
        console.log(result.status);
        // complete progress bar
    }
 });

此外，您可以使用 css 来应用过渡，以给人一种进度条进度条的感觉。

【讨论】：

【解决方案2】：

使用 javascript 回调或承诺的概念。您可以创建一个脚本，当单击按钮时，onclick 函数将运行并更改 tge 按钮内的内容，更改时执行 ajax 调用，如果成功则再次调用 Promise

【讨论】：