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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
That's not valid JSON.