jquery - jQuery增量读取AJAX流？

Question

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

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

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

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

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

score 85 · Accepted Answer

这在输出文本或 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...');

文件

<!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 FILE 第 4 行从更改echo $val;为echo '{"name":"'.$val.'"};'. 这会输出一系列 JSON 对象。
将 HTML 文件第 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。然而，我们的 FULL 响应{...};{...};{...};不是有效的 JSON。该jqXHR.done方法假定存在错误，因为无法将完整的响应解析为 JSON。

如评论中所述，您可以使用以下方法在客户端禁用此检查：

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

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

score 34 · Accepted Answer

使用 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

score 21 · Accepted Answer

您将要为此直接使用javascript。原因是你会想要不断地轮询而不是等待回调触发。你不需要 jQuery，这很简单。他们在 Ajax Patterns 网站上有一些很好的源代码。

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

score 16 · Accepted Answer

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

它非常易于使用，让您不必担心太多任何事情。它也有很好的文档。

score 1 · Accepted Answer

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

服务器代码来自 “使用 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 的人有所帮助。

score 0 · Accepted Answer

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

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

如果您想变得更花哨，您可以在每次读取 responseText 数据时清除它，如这里所述）。

例如，请参阅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>

jquery - jQuery增量读取AJAX流？

6 回答 6

PHP文件

文件

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

不要使用application/json

Related

Reference

不要使用`application/json`