Flush data output frontend

1

I'm following the example of php.net

    <?php
header( 'Content-type: text/html; charset=utf-8' );
echo 'Begin ...<br />';
for( $i = 0 ; $i < 10 ; $i++ )
{
  echo $i . '<br />';
  flush();
  ob_flush();
  sleep(1);
}
echo 'End ...<br />';
?> 

If I execute this script directly in the browser it counts from 1 to 10 showing its result correctly ...

But I have a textarea that receives the items, and ajax to send the post and search the result on the screen according to the result

More when I send the item, the flush does not work, it only returns the result at the end of

     <script type="text/javascript">
$(document).ready(function() {
    $("#enviar").click(function() {
        var nome = $("#nome");
        var nomePost = nome.val(); 
        $.post("flush.php", {nome: nomePost},
        function(data){
         $("#resposta").html(data);
         }
         , "html");
    });
});
</script>



    <form action="" method="post">
      <textarea name="nome" id="nome" cols="45" rows="5"  required placeholder="Sua lista bla bla bla bla..."></textarea>
      <br /> 
      <br />
     </form>
     <button id="enviar" type="submit" class="ls-btn-primary ls-btn-xs">Check !</button>
      <br>
    </h6>

<br>

  <div  id="resposta"> Aguardando lista!</div>
    
asked by anonymous 06.04.2015 / 21:29

1 answer

1

The client even receives the data every flush supposedly, however ajax only delivers the final result, that is, ajax will only give you something when readyState equals 4 (equals complete ) .

To receive part by part you must create multiple requests using the GET or SESSION method. I believe you will use this with real data, in case I added an example just to simulate the situation, if it is database you can check with mysqli_num_rows and LIMIT ?,? (offset and limit) if returned 0 , being result equal to zero then you can use:

if (mysqli_num_rows($result) === 0) {
    echo 'final';
    exit;
}

Create a file called chunkdata.php

<?php
header( 'Content-type: text/html; charset=utf-8' );

$offset = isset($_GET['offset']) ?   0 : $_GET['offset'];
$limit  = empty($_GET['limit'])  ?  10 : $_GET['limit'];

if ($offset > 100) {
    //E você pode criar uma fork para limitar as requisições quando chegar ao resultado final, neste caso é apenas um exemplo para simular
    echo 'final';
    exit;
}

for( $i = $offset; $i < $limit; $i++)
{
  echo $i . '<br />';
}
?> 

And the delay would be on the front end, something like:

function getData(nomePost, offset) {
    var delay = 1000;//Delay das requisições
    var limit = 10;//O limite da consulta será de dez em dez
    offset = offset || 0;//Se for undefined usa 0

    $.post("chunkdata.php?offset=" + offset + "&limit=" + limit,
        {
            "nome": nomePost
        }, function(data) {
            //Se o servidor retornar a palavra "final" então isto irá interromper o loop
            if (data !== "final") {
                 return;
            }
            var lastData = $("#nome").html();
            $("#nome").html(lastData + data);

            //Roda o script novamente
            setTimeout(getData, delay, nomePost, offset);
    }, "html");
}

$(document).ready(function() {
    $("#enviar").click(function() {
        getData($("#nome").val());
    });
});
    
06.07.2015 / 21:48