38

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

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 秒后弹出。

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

4

3 回答 3

68

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

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

这适用于所有现代浏览器，包括 IE 10。此处为W3C 规范。

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

于 2012-09-05T11:57:47.057 回答
7

很快我们应该能够使用ReadableStreamAPI（此处为 MDN 文档）。下面的代码似乎适用于 Chrome 版本 62.0.3202.94：

fetch(url).then(function (response) {
    let reader = response.body.getReader();
    let decoder = new TextDecoder();
    return readData();
    function readData() {
        return reader.read().then(function ({value, done}) {
            let newData = decoder.decode(value, {stream: !done});
            console.log(newData);
            if (done) {
                console.log('Stream complete');
                return;
            }
            return readData();
        });
    }
});
于 2017-12-15T09:40:50.557 回答
0

success当完整的数据传输完成并且连接以 200 响应代码关闭时，该事件将触发。我相信您应该能够实现本机onreadystatechanged事件并在数据包到来时看到它们。

于 2012-04-24T15:35:54.303 回答