web-dev-qa-db-ja.com

jQuery読み取りAJAX増分ストリーム？

私は この質問 を読みましたが、私の質問に正確に答えていません。残念ながら、最後にAJAXを確認してからXHRオブジェクトの内容が変更されたように見えるため、データの取り込みが完了する前にresponseTextに直接アクセスすることはできなくなりました。

AJAX（jQueryが望ましいですが、提案を受け付けています））を使用して、制御できないサーバーからHTTP経由でCSVデータを取得するページを作成する必要があります。大きい;メガバイトのテキストは珍しくありません。

サーバーはストリームフレンドリーです。 JavaScriptから直接、返されるデータのストリームにアクセスする方法はありますか？

私はいくつかのPHP中間に住み、ある種の「コメット」技術（ロングポーリング、EventSourceなど）を使用するコードを書くオプションがありますが、私はそれを避けることを望みます可能なら。

関連がある場合は、この質問について、ユーザーがFirefox/Chrome/Operaの最新バージョンを使用しており、古いブラウザーの互換性は問題ではないと仮定します。

jqueryajaxjavascript-eventslong-pollinghttp-streaming
69
Josh

このために、JavaScriptをまっすぐに使いたいと思うでしょう。その理由は、コールバックが発生するのを待たずに、継続的にポーリングしたいからです。これにはjQueryは必要ありません。非常に簡単です。彼らにはいくつかの Ajax Patternsウェブサイトのこのための素晴らしいソースコード があります。

基本的には、応答の最後の位置を追跡し、その場所を過ぎたテキストを定期的にポーリングするだけです。あなたの場合の違いは、完全なイベントにサブスクライブしてポーリングを停止できることです。

19
scottheckel

textまたは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オブジェクトを増分的に（完全にロードする前に）ロードすることはできません。

ただし、応答にmultipleJSONオブジェクトが次々とある場合、パイプを通過するときに一度に1つずつ読み込むことができます。

だから私は上記のコードを微調整しました...

  1. PHP FILE行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);
_

    この基本的なコードは、ブラウザーに送られる各「チャンク」が有効なJSONオブジェクトであると想定していることに注意してください。パケットがどのように到着するかを予測できないため、常にそうなるとは限りません-セミコロンに基づいて文字列を分割する必要がある場合があります（または別の区切り文字を考え出す）。

_application/json_を使用しないでください

Do[〜＃〜] not [〜＃〜]ヘッダーを_application/json_に変更するために-私はこれをやった3日。応答タイプが_application/json_の場合、ブラウザーは応答が完了するまで、完全に完了するまで待機します。次に、完全な応答が解析され、実際のJSONであるかどうかが確認されます。ただし、FULLレスポンスは_{...};{...};{...};_であり、有効なJSONではありません。 _jqXHR.done_メソッドは、完全な応答をJSONとして解析できないため、エラーが発生したと想定します。

コメントで述べたように、次を使用してクライアント側でこのチェックを無効にできます。

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

一部の人々がこれが役立つことを願っています。

63
AlexMorley-Finch

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/en-us/library/cc288060（VS.85）.aspx

32
Petah

サーバーはストリームフレンドリー（非同期）であり、jqueryソリューションを探していたと言うので、 jQuery Stream Plugin ？をチェックアウトしましたか？

使い方はとても簡単で、何も心配する必要はありません。 かなり良いドキュメント もあります。

15
g19fanatic

JOPを使用してこれを実現する簡単な方法を次に示します（OPの要求どおり）。

まず、 https://Gist.github.com/chrishow/3023092 から以下のコードを実行して、ajaxオブジェクトを拡張してonreadystatechangeをサポートします（この応答の下部）。次に、xhr.responseTextで新しいテキストをチェックするonreadystatechange関数を使用してajaxを呼び出すだけです。

もっと洗練されたければ、 here ）のように、読むたびに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>
0
mwag