Last active
May 12, 2024 00:31
-
-
Save sohelrana820/63f029d3aa12936afbc50eb785c496c0 to your computer and use it in GitHub Desktop.
Get Streaming Data Over Jquery Ajax
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Catch php output buffering data over jQuery AJAX | |
| * | |
| * @author: Sohel Rana ([email protected]) | |
| * @author url: https://blog.sohelrana.me | |
| * @link: https://blog.sohelrana.me/catch-php-output-buffering-data-jquery-ajax/ | |
| * @licence MIT | |
| */ | |
| set_time_limit(0); | |
| ob_implicit_flush(true); | |
| ob_end_flush(); | |
| for ($counter = 0; $counter < 10; $counter++) { | |
| //Hard work! | |
| sleep(1); | |
| $processed = ($counter + 1) * 10; //Progress | |
| $response = array('message' => $processed . '% complete. server time: ' . date("h:i:s", time()), 'progress' => $processed); | |
| echo json_encode($response); | |
| } | |
| sleep(1); | |
| $response = array('message' => 'Complete', 'progress' => 100); | |
| echo json_encode($response); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <br/><br/><br/><br/> | |
| <div class="col-lg-8 col-lg-offset-2"> | |
| <div class="progress"> | |
| <div class="progress-bar" role="progressbar" aria-valuenow="70" | |
| aria-valuemin="0" aria-valuemax="100" style="width:0"> | |
| <span id="fullResponse"></span> | |
| </div> | |
| </div> | |
| <h4 id="progressTest"></h4> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js" type="text/javascript"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> | |
| <script> | |
| var lastResponseLength = false; | |
| var ajaxRequest = $.ajax({ | |
| type: 'post', | |
| url: 'catch-php-output-buffering-data-jquery-ajax.php', | |
| data: {}, | |
| dataType: 'json', | |
| processData: false, | |
| xhrFields: { | |
| // Getting on progress streaming response | |
| onprogress: function(e) | |
| { | |
| var progressResponse; | |
| var response = e.currentTarget.response; | |
| if(lastResponseLength === false) | |
| { | |
| progressResponse = response; | |
| lastResponseLength = response.length; | |
| } | |
| else | |
| { | |
| progressResponse = response.substring(lastResponseLength); | |
| lastResponseLength = response.length; | |
| } | |
| var parsedResponse = JSON.parse(progressResponse); | |
| $('#progressTest').text(progressResponse); | |
| $('#fullResponse').text(parsedResponse.message); | |
| $('.progress-bar').css('width', parsedResponse.progress + '%'); | |
| } | |
| } | |
| }); | |
| // On completed | |
| ajaxRequest.done(function(data) | |
| { | |
| console.log('Complete response = ' + data); | |
| }); | |
| // On failed | |
| ajaxRequest.fail(function(error){ | |
| console.log('Error: ', error); | |
| }); | |
| console.log('Request Sent'); | |
| </script> | |
| </body> | |
| </html> |
Thanks a ton!
It's Not working for me. I am having
foreachloop and i have used exactly what u diid in this code. :-(My Json display like:
{"name":"test1"}{"name":"test2"}{"name":"test3"}{"message":"processover"}
That's not valid JSON.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When using nginx you need to disable fastcgi_buffering with
header('X-Accel-Buffering: no');Disabling the cache is useful to avoid caching the response
header("Cache-Control: no-cache, must-revalidate");