Currently, I am using XMLHttpRequest to execute an AJAX request without the use of jQuery, relying solely on plain old Javascript. This particular AJAX request may take some time as it calls an endpoint responsible for processing transactions.
In order to keep track of the transaction status in real-time, I intend to refresh this information on the screen while the asynchronous AJAX request is ongoing. To achieve this, I plan to make a 'progress' transaction through another GET AJAX request.
My exploration of the XmlHttpRequest object led me to experiment with the onprogress attribute. However, I discovered that it does not provide the functionality I envision, which resembles a while loop.
In pseudo code, my approach would look something like this:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'process/', true);
xhr.send();
// Create a loop to call another process repeatedly while the request is pending
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log("Request Successful");
} else {
console.log("Request Failed");
}
} else {
console.log("Request State changed but not complete");
}
}
Despite several attempts, I have been unable to solve this issue. My initial idea was to implement a while loop based on a scoped value, assuming the asynchronous nature of the request would update this value to break the loop. However, this solution did not yield the expected results.
I believed this scenario might be quite common, especially for progress bars, yet I failed to find a suitable solution. Is there a fundamental aspect I am overlooking?