JSFiddle - React, Tailwind, and code Playground
HTML
<script src=https://code.jquery.com/jquery-1.5.min.js></script>
JavaScript
/* One-time setup (run once before other code)
* adds onreadystatechange to $.ajax options
* from https://gist.github.com/chrishow/3023092)
* success etc will still fire if provided
*/
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
if ( options.onreadystatechange ) {
var xhrFactory = options.xhr;
options.xhr = function() {
var xhr = xhrFactory.apply( this, arguments );
function handler() {
options.onreadystatechange( xhr, jqXHR );
}
if ( xhr.addEventListener ) {
xhr.addEventListener( "readystatechange", handler, false );
} else {
setTimeout( function() {
var internal = xhr.onreadystatechange;
if ( internal ) {
xhr.onreadystatechange = function() {
handler();
internal.apply( this, arguments );
};
}
}, 0 );
}
return xhr;
};
}
});
// ----- myReadyStateChange(): this will do my incremental processing -----
var last_start = 0; // using global var for over-simplified example
function myReadyStateChange(xhr /*, jqxhr */) {
if(xhr.readyState >= 3 && xhr.responseText.length > last_start) {
var chunk = xhr.responseText.slice(last_start);
alert('Got chunk: ' + chunk);
console.log('Got chunk: ', chunk);
last_start += chunk.length;
}
}
// ----- call my url and process response incrementally -----
last_start = 0;
$.ajax({
url: "https://code.jquery.com/jquery-1.5.js", // whatever your target url is goes here
onreadystatechange: myReadyStateChange
});