我读过这个问题，但这并没有完全回答我的问题。
不幸的是，自从上次接触AJAX以来，在XHR对象中发生了变化，因此在响应内容被完全填充之前，无法直接访问responseText。
我需要编写一个页面，使用AJAX（最好是jQuery，但我也可以接受其他建议）从一个我无法控制的服务器通过HTTP检索CSV数据。响应数据可能非常大，一个兆字节的文本并不罕见。
服务器支持流式传输。是否仍然有办法直接从JavaScript获取正在返回的数据流？
我有一些选择：编写一些PHP代码，放在中间并使用某种“Comet”技术（长轮询、EventSource等），但如果可能的话，我宁愿避免这样做。
如果有关系，请假设用户拥有最新版本的Firefox / Chrome / Opera浏览器，旧版本浏览器的兼容性不是问题。
在输出文本或HTML时，这相当直接。以下是一个例子。
（但如果尝试输出JSON，则会遇到问题，我将在下面进一步解决。）
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对象，则可以随着它们逐个到达，逐个加载它们。
所以我通过以下方式修改了我的代码...
将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);
$.ajax(..., {dataType: "text"})
希望一些人会觉得这很有用。
echo '{"name":"'.$val.'"};'）手动创建JSON通常是不好的实践。更好的代码可能是echo json_encode(["name"=>$val]).";";。 - Laef使用XMLHttpRequest.js
https://github.com/ilinsky/xmlhttprequest
http://code.google.com/p/xmlhttprequest
要使用PHP进行长轮询(long polling)：
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:
=>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://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
application/octet-stream。请参阅我更新的帖子，其中包含PHP示例。 - Petah在这种情况下，您需要使用纯JavaScript。原因是您需要持续轮询而不等待回调函数执行。您不需要jQuery，它非常简单。他们在Ajax Patterns网站上有一些不错的源代码。
基本上，您只需跟踪响应中的最后位置，并定期轮询超过该位置的更多文本。在您的情况下，不同之处在于您可以订阅完成事件并停止轮询。
既然你说你的服务器适合流式（异步）并正在寻找jQuery方案，那么你是否查看过jQuery Stream Plugin？
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;
}
}
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);
});
以下是使用 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>