ajax - 如何在客户端编写javascript来及时接收和解析 `chunked`响应？

Question

我正在使用播放框架来生成分块响应。代码是:

class Test extends Controller {
    public static void chunk() throws InterruptedException {
        for (int i = 0; i < 10; i++) {
            String data = repeat("" + i, 1000);
            response.writeChunk(data);
            Thread.sleep(1000);
        }
    }
}

当我使用浏览器访问时 http://localhost:9000/test/chunk ，我可以看到显示的数据每秒增加。但是，当我编写一个 javascript 函数来接收和处理数据时，发现它会阻塞直到收到所有数据。

代码是:

$(function(){
    $.ajax(
        "/test/chunked", 
        {
            "success": function(data, textStatus, xhr) {
                alert(textStatus);
            }
        }
    );
});

当收到所有数据时，我可以看到 10 秒后弹出一个消息框。

如何获取流并及时处理数据？

Answer 1

jQuery 不支持，但你可以用普通的 XHR 来做到这一点:

var xhr = new XMLHttpRequest()
xhr.open("GET", "/test/chunked", true)
xhr.onprogress = function () {
  console.log("PROGRESS:", xhr.responseText)
}
xhr.send()

这适用于 all modern browsers ，包括 IE 10。W3C 规范 here .

这里的缺点是 xhr.responseText包含一个累积的响应。您可以在其上使用子字符串，但更好的主意是使用 responseType属性和使用 slice在 ArrayBuffer 上.