jQuery增量读取AJAX流？答案

【问题标题】：jQuery read AJAX stream incrementally?jQuery增量读取AJAX流？
【发布时间】：2011-12-06 03:21:42
【问题描述】：

我已阅读this question，但它并不能完全回答我的问题。不幸的是，自从我上次查看 AJAX 以来，XHR 对象中的情况似乎发生了变化，因此在完成填充之前不再可以直接访问 responseText。

我必须编写一个使用 AJAX（最好是 jQuery，但我愿意接受建议）的页面，以通过 HTTP 从我无法控制的服务器检索 CSV 数据。响应数据可能非常大；一兆字节的文本并不少见。

服务器是流友好的。是否还有任何方法可以直接从 JavaScript 访问正在返回的数据流？

我确实可以选择编写一些位于中间并使用某种“彗星”技术（长轮询、EventSource 等）的 PHP 代码，但如果可能的话，我宁愿避免这样做。

如果相关，假设用户拥有最新版本的 Firefox/Chrome/Opera 并且旧浏览器兼容性不是问题。

【问题讨论】：

我知道这个已经回答了，我以前做过类似的事情，看看，如果你必须撕掉它jsfiddle.net/JmZCE/1

标签： jquery ajax dom-events long-polling http-streaming

【解决方案1】：

这在输出文本或HTML时非常简单。下面是一个例子。

（但是，如果尝试输出 JSON，您会遇到问题，我将进一步解决。）

PHP 文件

header('Content-type: text/html; charset=utf-8');
function output($val)
{
    echo $val;
    flush();
    ob_flush();
    usleep(500000);
}
output('Begin... (counting to 10)');
for( $i = 0 ; $i < 10 ; $i++ )
{
    output($i+1);
}
output('End...');

HTML 文件

<!DOCTYPE>
<html>
    <head>
        <title>Flushed ajax test</title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        var last_response_len = false;
        $.ajax('./flushed-ajax.php', {
            xhrFields: {
                onprogress: function(e)
                {
                    var this_response, response = e.currentTarget.response;
                    if(last_response_len === false)
                    {
                        this_response = response;
                        last_response_len = response.length;
                    }
                    else
                    {
                        this_response = response.substring(last_response_len);
                        last_response_len = response.length;
                    }
                    console.log(this_response);
                }
            }
        })
        .done(function(data)
        {
            console.log('Complete response = ' + data);
        })
        .fail(function(data)
        {
            console.log('Error: ', data);
        });
        console.log('Request Sent');
        </script>
    </body>
</html>

如果我需要使用 JSON 执行此操作怎么办？

实际上不可能增量加载单个 JSON 对象（在它完全加载之前），因为在您拥有完整的对象之前，语法将始终无效。

但是，如果您的响应有多个 JSON 对象，一个接一个，则可以一次加载一个，因为它们从管道中下来。

所以我调整了上面的代码...

将 PHP 文件第 4 行从 echo $val; 更改为 echo '{"name":"'.$val.'"};'。这会输出一系列 JSON 对象。
将 HTML FILE 第 24 行从 console.log(this_response); 更改为
```
this_response = JSON.parse(this_response);
console.log(this_response.name);
```
请注意，此基本代码假定进入浏览器的每个“块”都是有效的 JSON 对象。情况并非总是如此，因为您无法预测数据包将如何到达 - 您可能需要根据分号拆分字符串（或想出另一个分隔符）。

不要使用`application/json`

不将您的标题更改为application/json - 我这样做了，它让我在谷歌上搜索了 3 天。当响应类型为application/json 时，浏览器会一直等待，直到响应完成，就像完全完成一样。然后解析完整的响应以检查它是否是 JSON。然而，我们的完整响应是 {...};{...};{...};，它不是有效的 JSON。 jqXHR.done 方法假定存在错误，因为无法将完整的响应解析为 JSON。

如 cmets 中所述，您可以使用以下命令在客户端禁用此检查：

$.ajax(..., {dataType: "text"})

希望有些人觉得这很有用。

【讨论】：

哇，谢谢先生，这正是我想要的！很好的例子，说明如何将这种技术与 JSON 一起使用。
非常感谢，这花了我 1 分钟才成功实施。很棒的东西。
使用 {dataType:"text"} 调用 $.ajax，这将抑制智能猜测（参见api.jquery.com/jquery.ajax dataType）
是的，您可以使用双簧管 (oboejs.com) 等流式 JSON 解析器逐步读取 JSON。您不需要将 JSON 响应更改为具有多个 JSON 对象，从设计角度来看，最好不要这样做
关于 PHP 的注释：通过连接字符串（例如 echo '{"name":"'.$val.'"};'）在 PHP 端手动创建 JSON 通常是不好的做法。一些更好的代码可能是echo json_encode(["name"=>$val]).";";。

【解决方案2】：

使用 XMLHttpRequest.js

https://github.com/ilinsky/xmlhttprequest

http://code.google.com/p/xmlhttprequest

提供 XMLHttpRequest 1.0 对象的不显眼且符合标准 (W3C) 的跨浏览器实现
修复了在其原生 XMLHttpRequest 对象实现中观察到的所有浏览器怪癖
启用 XMLHttpRequest 对象活动的透明日志记录

在 PHP 中使用长轮询：

输出.php：

<?php
header('Content-type: application/octet-stream');

// Turn off output buffering
ini_set('output_buffering', 'off');
// Turn off PHP output compression
ini_set('zlib.output_compression', false);
// Implicitly flush the buffer(s)
ini_set('implicit_flush', true);
ob_implicit_flush(true);
// Clear, and turn off output buffering
while (ob_get_level() > 0) {
    // Get the curent level
    $level = ob_get_level();
    // End the buffering
    ob_end_clean();
    // If the current level has not changed, abort
    if (ob_get_level() == $level) break;
}
// Disable apache output buffering/compression
if (function_exists('apache_setenv')) {
    apache_setenv('no-gzip', '1');
    apache_setenv('dont-vary', '1');
}

// Count to 20, outputting each second
for ($i = 0;$i < 20; $i++) {
    echo $i.str_repeat(' ', 2048).PHP_EOL;
    flush();
    sleep(1);
}

运行.php：

<script src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script src="https://raw.github.com/ilinsky/xmlhttprequest/master/XMLHttpRequest.js"></script>

<script>
$(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/longpoll/', true);
    xhr.send(null);
    var timer;
    timer = window.setInterval(function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            window.clearTimeout(timer);
            $('body').append('done <br />');
        }
        $('body').append('state: ' + xhr.readyState + '<br />');
        console.log(xhr.responseText);
        $('body').append('data: ' + xhr.responseText + '<br />');
    }, 1000);
});
</script>

这应该输出：

state: 3
data: 0
state: 3
data: 0 1
state: 3
data: 0 1 2
state: 3
data: 0 1 2 3
state: 3
data: 0 1 2 3 4
...
...
...
state: 3
data: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
state: 3
data: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
state: 3
data: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
done
state: 4
data: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

对于 IE，你需要查看 XDomainRequest

http://blogs.msdn.com/b/ieinternals/archive/2010/04/06/comet-streaming-in-internet-explorer-with-xmlhttprequest-and-xdomainrequest.aspx

http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

【讨论】：

这似乎不支持 readystate 3，甚至在 Chrome 中也不支持 :(
@Josh，是的。但是长轮询有各种怪癖。您需要在读取状态发生变化之前发送 2Kb 数据，并将内容类型设置为application/octet-stream。有关 PHP 示例，请参阅我更新的帖子。
我会看看我能用这个做什么。我似乎不可避免地需要在中间添加一些 PHP，因为我无法控制原始响应的内容类型。但我也真的很希望能够支持 IE6/7（不幸的是）...
@xorinzor pastebin.com/3Dbt2mhQ 不过，根据您的需要，您可能需要实现自定义协议。这样读取所有数据直到;。
@Bakalash 因为某些浏览器在发送 2kb 输出之前不允许流式传输。

【解决方案3】：

您将要为此直接使用 javascript。原因是您将要连续轮询而不是等待回调触发。你不需要 jQuery，这很简单。他们有一些nice source code for this on the Ajax Patterns website。

基本上，您只想跟踪您在响应中的最后位置，并定期轮询该位置之后的更多文本。您的情况不同的是，您可以订阅完整的事件并停止投票。

【讨论】：

你能给我举个例子吗？您提供的链接说“XMLHttpRequest 的 responseText 属性始终包含已从服务器中清除的内容，即使连接仍处于打开状态。” .. 而且，根据我一直在阅读的内容，在较新的浏览器中不再是这种情况。
不就是在IE里吗？我认为 readyState 3 包含在其他浏览器中。
我主要是通过这个 jquery 插件中的注释：plugins.jquery.com/project/ajax-http-stream'注意：我注意到这不再适用于 Firefox 3.0.11（适用于 3.0.8 linux)、IE8 或最新版本的 Chrome。显然趋势是在请求完成之前禁止访问 xmlhttprequest.responseText（愚蠢的 imo）。抱歉，我无法解决这个问题'
事实证明，这实际上确实适用于直接的 javascript，在尝试之后（至少对于行为正常的浏览器）。仍然希望找到一个 jquery 版本，以便它在所有浏览器上都能正常工作，但现在这毕竟是最好的答案。
死链接让我难过

【解决方案4】：

既然你说你的服务器是流友好的（异步的）并且正在寻找一个 jquery 解决方案，你检查了jQuery Stream Plugin 吗？

它非常易于使用，让您不必担心任何事情。它也有pretty good documentation。

【讨论】：

我当然可以看看这个。在 API 页面的快速浏览中，我看不到将 HTTP POST 和基本身份验证信息发送到服务器的方法，但我确信它一定在某个地方。也可能“流友好”是术语的错误选择。我不是指异步或双向。我的意思是它会随着时间的推移以流的形式发回大量数据，就像巨大的 HTTP 响应一样。同时，我发现了一个非 jquery 解决方案，对于我最初的目的来说应该“足够好”。
对于 http post 和基本身份验证来说，你还是会直接使用 jquery。
我如何将“直接 jquery”与 jquery 流插件集成？文档在这一点上还不清楚。有例子吗？
+1 它现在变成了门户，看起来非常棒，包括 WebSockets 和所有东西。 github.com/flowersinthesand/portal
@marsbard 门户已达到其End of Life 并且不再维护！使用Vibe。

【解决方案5】：

我必须提供一个带有大量 JSON 有效负载的网格，该有效负载一直运行到最大允许大小限制。我使用的是MVC和jquery，所以我改编了上面AlexMorley-Finch的解决方案。

服务器代码来自"Streaming data using Web API"。还有https://github.com/DblV/StreamingWebApi。

public class StreamingController : ApiController
{

    [HttpGet]
    [ActionName("GetGridDataStream")]
    public HttpResponseMessage GetGridDataStream(string id)
    {
        var response = Request.CreateResponse();
        DynamicData newData = new DynamicData();
        var res = newData.GetDataRows(id);
        response.Content = new PushStreamContent((stream, content, context) =>
        { 
            foreach (var record in res)
            {
                var serializer = new JsonSerializer();
                using (var writer = new StreamWriter(stream))
                {
                    serializer.Serialize(writer, record);
                    stream.Flush();
                }

               // Thread.Sleep(100);
            }

            stream.Close();
        });

        return response;
    }
}

这创建了一个 {json object}{json object}{json object} 流，需要用逗号分隔并围绕 [ ] 才能成功解析为 json。

因此向客户端代码提供了缺少的字符：

 var jsonData = {}; 

 $.ajax("api/Streaming/GetGridDataStream/" + viewName, {
    xhrFields: {
            onprogress: function (e) { 
                // console.log(this_response);
            }
        }
    }, { dataType: "text" }) //<== this is important for JSON data
    .done(function (data) { 

        data = "[" + data.replace(/\}\{/gi, "},{") + "]";

        jsonData["DataList"] = JSON.parse(data);
        //more code follows to create grid
    })
    .fail(function (data) {
        console.log('Error: ', data);
    });

我希望这对使用 .Net MVC 和 jQuery 的人有所帮助。

【讨论】：

【解决方案6】：

这是使用 JQuery 实现此目的的一种直接方法（根据 OP 的要求）：

首先，通过从https://gist.github.com/chrishow/3023092 运行以下代码（附加在此响应的底部），扩展 ajax 对象以支持 onreadystatechange。然后只需使用 onreadystatechange 函数调用 ajax，该函数将检查 xhr.responseText 是否有新文本。

如果你想变得更花哨，你可以在每次阅读 responseText 数据时清除它，例如描述here）。

例如，请参阅https://jsfiddle.net/g1jmwcmw/1/，它将从https://code.jquery.com/jquery-1.5.js 下载响应并在控制台窗口中以块的形式输出，使用下面的代码（您可以将其复制到 html 页面中，然后在浏览器中打开） ):

<!-- jquery >= 1.5. maybe earlier too but not sure -->
<script src=https://code.jquery.com/jquery-1.5.min.js></script>
<script>
/* One-time setup (run once before other code)
 *   adds onreadystatechange to $.ajax options
 *   from https://gist.github.com/chrishow/3023092)
 *   success etc will still fire if provided
 */
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
    if ( options.onreadystatechange ) {
        var xhrFactory = options.xhr;
        options.xhr = function() {
            var xhr = xhrFactory.apply( this, arguments );
            function handler() {
                options.onreadystatechange( xhr, jqXHR );
            }
            if ( xhr.addEventListener ) {
                xhr.addEventListener( "readystatechange", handler, false );
            } else {
                setTimeout( function() {
                    var internal = xhr.onreadystatechange;
                    if ( internal ) {
                        xhr.onreadystatechange = function() {
                            handler();
                            internal.apply( this, arguments ); 
                        };
                    }
                }, 0 );
            }
            return xhr;
        };
    }
});

// ----- myReadyStateChange(): this will do my incremental processing -----
var last_start = 0; // using global var for over-simplified example
function myReadyStateChange(xhr /*, jqxhr */) {
    if(xhr.readyState >= 3 && xhr.responseText.length > last_start) {
        var chunk = xhr.responseText.slice(last_start);
        alert('Got chunk: ' + chunk);
        console.log('Got chunk: ', chunk);
        last_start += chunk.length;
    }
}

// ----- call my url and process response incrementally -----
last_start = 0;
$.ajax({
  url: "https://code.jquery.com/jquery-1.5.js", // whatever your target url is goes here
  onreadystatechange: myReadyStateChange
});

</script>

【讨论】：

在这里操作。这个问题是 6 年前提出的。这在 2011/2012 年会起作用吗？我不再从事这个项目，所以我无法测试你的答案。
是的，它适用于 jquery 1.5（2011 年 1 月，code.jquery.com/jquery-1.5.min.js）。例如，您可以剪切/粘贴上面的代码。
我只需要相信你。我在多个浏览器中运行了您的确切代码，整个响应都在一个“块”中，所以它并没有真正证明任何事情。没有时间进一步摆弄它。
你应该可以看到它。我将上面的内容逐字保存到一个 test.html 文件并在 Chrome 中打开它，控制台窗口显示收到的响应分两块。

PHP 文件

HTML 文件

如果我需要使用 JSON 执行此操作怎么办？

不要使用application/json

不要使用`application/json`