Currently, I am attempting to implement server-to-client streaming in JavaScript using AJAX (specifically XmlHttpRequest or xhr). My approach involves utilizing a modified version of the handleResponse function as outlined in the following Cross-browser implementation of "HTTP Streaming" (push) AJAX pattern
function handleResponse() {
if (http.readyState != 4 && http.readyState != 3)
return;
if (http.readyState == 3 && http.status != 200)
return;
if (http.readyState == 4 && http.status != 200) {
clearInterval(pollTimer);
inProgress = false;
}
// In certain cases, http.responseText may be null...
if (http.responseText === null)
return;
while (prevDataLength != http.responseText.length) {
if (http.readyState == 4 && prevDataLength == http.responseText.length)
break;
prevDataLength = http.responseText.length;
var response = http.responseText.substring(nextLine);
var lines = response.split('\n');
nextLine = nextLine + response.lastIndexOf('\n') + 1;
if (response[response.length-1] != '\n')
lines.pop();
for (var i = 0; i < lines.length; i++) {
// ...
}
}
if (http.readyState == 4 && prevDataLength == http.responseText.length)
clearInterval(pollTimer);
inProgress = false;
}
I am using a PHP script to flush data, which works effectively without AJAX and provides real-time data updates to the browser.
While Firefox performs well with this setup, Google Chrome and IE present an issue where they return an empty responseText when xhr.readyState is at 3. Despite researching online, I have not found a solution to address this problem.
If anyone has insight into how to overcome this implementation issue specifically in Chrome, it would be greatly appreciated. (According to W3C standards, responseText should not be NULL in readyState==3 - Chrome deviates from this standard by providing an empty string).
In case you do not have a direct solution, are there any frameworks or libraries that successfully tackle this challenge?
Thank you in advance for your input.
Edit: One workaround involves creating an iframe, executing the script within the iframe to flush data, and then retrieving the data via JavaScript from the iframe. However, this method does not utilize AJAX. Ideally, I am seeking a pure AJAX solution.