Forked from sohelrana820/catch-php-output-buffering-data-jquery-ajax.php
Created
June 30, 2020 07:32
-
-
Save PeterTough2/da61f48568cf42dd7d60ee02100f91aa 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment