jQuery 增量读取 AJAX 流?

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

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

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

服务器是流友好的。还有什么方法可以直接从 JavaScript 访问返回的数据流吗?

我确实可以选择编写一些位于中间的 PHP 代码并使用某种“ cometd ”技术(长轮询、EventSource 等),但我希望尽可能避免这种情况。

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

最佳答案

这在输出文本或 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 对象,一个接一个,那么可以在它们通过管道时一次加载一个。

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

  1. 将 PHP 文件第 4 行从 echo $val; 更改为 echo '{"name":"'.$val.'"};'。这将输出一系列 JSON 对象。

  2. 将 HTML 文件第 24 行从 console.log(this_response); 更改为

    this_response = JSON.parse(this_response);
    console.log(this_response.name);
    

    请注意,此基本代码假定进入浏览器的每个“ block ”都是有效的 JSON 对象。情况并非总是如此,因为您无法预测数据包将如何到达 - 您可能需要根据分号(或想出另一个分隔符)拆分字符串。

不要使用application/json

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

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

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

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

关于jQuery 增量读取 AJAX 流?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7740646/

相关文章:

javascript - 为什么 live() 在移动 Safari 上不起作用?

javascript - 在 Firefox 中按下空格键时函数被调用两次

java - 使用ajax调用Struts 2 Action ,直接向响应写入字符串,不返回字符串

php - 传递 PHP 对象以在外部 JS 脚本中使用

javascript - 加载局部 View 时是否执行 JavaScript?

javascript - 在 JavaScript 中监听来自浏览器 "Find"窗口的事件

javascript点击事件不触发 Action

javascript - jquery如何访问插入到DOM的html上的事件

javascript - ontouchmove : Detecting the new element being touched when moving a touch across multiple elements

javascript - XMLHttpRequest - event.loaded 和 event.total 值的问题