使用 AJAX XMLHttpRequest 时，Symfony StreamedResponse 的响应文本被连接起来

Posted 2023-02-19

【中文标题】使用 AJAX XMLHttpRequest 时，Symfony StreamedResponse 的响应文本被连接起来

【英文标题】：The response text of Symfony StreamedResponse gets concatenated when using AJAX XMLHttpRequest

【发布时间】：2017-09-26 20:02:28

【问题描述】：

我有下面的控制器，一旦调用端点，它就会返回Line 1（作为响应）。两秒后它返回Line 2。当我直接访问 URL http://ajax.dev/app_dev.php/v2 时这很好，因此这证明端点按预期工作。

/**
 * @Method("GET")
 * @Route("/v2", name="default_v2")
 *
 * @return Response
 */
public function v2Action()

    $response = new StreamedResponse();
    $response->setCallback(function () 
        echo 'Line 1';
        ob_flush();
        flush();

        sleep(2);
        echo 'Line 2';
        ob_flush();
        flush();
    );

    return $response;

当我使用 AJAX 调用同一个端点时，第一个响应很好，即response: "Line 1"。但是，第二个是response: "Line 1Line2"，所以它被合并了。我应该怎么做才能获得response: "Line2" 作为第二个响应？请参阅下面的控制台日志。

XMLHttpRequest  onreadystatechange: xhr.onreadystatechange(), readyState: 3,
timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload,
responseURL: "http://ajax.dev/app_dev.php/v2", status: 200, 
statusText: "OK", responseType: "", response: "Line 1" 

XMLHttpRequest  onreadystatechange: xhr.onreadystatechange(), readyState: 3,
timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload,
responseURL: "http://ajax.dev/app_dev.php/v2", status: 200, 
statusText: "OK", responseType: "", response: "Line 1Line2" 

Complete

这是我正在使用的 AJAX。

$(document).ready(function () 
    $('button').click(function () 
        xhr = new XMLHttpRequest();
        xhr.open("GET", 'http://ajax.dev/app_dev.php/v2', true);
        xhr.onprogress = function(e) 
            console.log(e.currentTarget);
        ;
        xhr.onreadystatechange = function() 
            if (xhr.readyState == 4) 
                console.log("Complete");
            
        ;
        xhr.send();
    );
);

【问题讨论】：

jquery ajax, read the stream incrementally?的可能重复

看这个答案***.com/a/18964123/4224384

@yceruto 该链接很有帮助！谢谢你。所以我面临的问题是 XMLHttpRequest 的默认行为。 The responseText property of XMLHttpRequest always contains the content that's been flushed out of the server, even when the connection's still open.。看来我也得检查一下长度了。

【参考方案1】：

目前这只能是一个临时解决方案，因为每一个响应加起来都会变成一个巨大的响应，而不是一个干净的响应。

例如

Response 1: Hello
Response 2: World
Response 3: Bye

XMLHttpRequest e.currentTarget 属性将包含：

Hello
HelloWorld
HelloWorldBye

The responseText property of XMLHttpRequest always contains the content that's been flushed out of the server, even when the connection's still open. So the browser can run a periodic check, e.g. to see if its length has changed.

暂时我会使用下面的代码，但如果我能找到更好的解决方案，我会发布它。

<script>
    $(document).ready(function () 
        $('button').click(function () 
            xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://ajax.dev/app_dev.php/v2', true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

            xhr.onprogress = function(e) 
                var response = e.currentTarget.response;
                var output = typeof lastResponseLength === typeof undefined
                    ? response
                    : response.substring(lastResponseLength);

                lastResponseLength = response.length;
                console.log(output);
            ;

            xhr.onreadystatechange = function() 
                if (xhr.readyState == 4) 
                    console.log('Complete');
                
            ;

            xhr.send();
        );
    );
</script>