I am facing an issue where my XMLHttpRequest code is executing without any errors, but it always returns an empty responseText.
Here is the JavaScript code that I am using:
var apiUrl = "http://api.xxx.com/rates/csv/rates.txt";
var request = new XMLHttpRequest();
fetchApiData(apiUrl);
function fetchApiData(url) {
request.open("GET", url, true);
request.onreadystatechange = handleApiResponse;
request.setRequestHeader("Cache-Control", "no-cache");
request.send(null);
}
function handleApiResponse() {
if(request.readyState == 4) {
if(request.status == 200) {
result = request.responseText;
alert(result);
alert("Request successful!");
} else {
alert( " An error has occurred: " + request.statusText);
}
}
}
The JavaScript seems to be working fine as I can confirm that the readyState is 4 and the status is 200. However, the responseText remains empty.
Upon checking the Safari debug console, I noticed an error message related to "Error dispatching: getProperties" which I am unable to resolve.
I have tested the code in both Safari and Firefox browsers locally and on a remote server, with no luck in getting a non-empty responseText.
When accessing the URL directly in a browser, it does return the expected string with a status code of 200.
Coincidentally, I have implemented similar code for the same API URL in a Mac Widget, where it works perfectly. Yet, when running the exact code in a browser, the response remains empty.