jQuery逐步读取AJAX流？

Question 1

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

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

服务器是流友好的。在直接从JavaScript返回数据流时，还有什么方法可以访问它？

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

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

Question 2

您将要为此直接使用JavaScript。原因是您将要连续轮询而不是等待回调触发。您不需要jQuery，这非常简单。他们在Ajax Patterns网站上有一些不错的源代码。

本质上，您只想跟踪响应中的最后一个位置，并定期轮询该位置之后的更多文本。您的情况不同之处在于，您可以订阅complete事件并停止轮询。

Question 3

输出文本或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 FILE第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。但是，我们的FULL响应是{...};{...};{...};无效的JSON。该jqXHR.done方法假定存在错误，因为无法将完整的响应解析为JSON。

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

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

希望有人觉得这有用。

Question 4

使用XMLHttpRequest.js

https://github.com/ilinsky/xmlhttprequest

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

提供XMLHttpRequest 1.0对象的兼容标准（W3C）跨浏览器实现
修复了在本机XMLHttpRequest对象实现中观察到的所有浏览器怪癖
启用XMLHttpRequest对象活动的透明日志记录

要对PHP使用长时间轮询：

output.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);
}

run.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/zh-CN/library/cc288060(VS.85).aspx

Question 5

既然您说您的服务器是流友好的（异步的）并且正在寻找jquery解决方案，那么您是否签出了jQuery Stream Plugin？

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

Question 6

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

Question 7

我必须提供一个带有大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对象} {json对象} {json对象}的流，该流需要定界逗号和周围的[]才能成功解析为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的人有所帮助。

jQuery逐步读取AJAX流？

PHP文件

HTML文件

如果我需要使用JSON怎么办？

不要使用 application/json

不要使用 `application/json`