Making API calls to RapidAPI using XMLHttpRequest in JavaScript

Other Questions RapidAPI
1

Hey everyone! I’m having trouble with a JavaScript XMLHttpRequest call to a RapidAPI endpoint. The API seems to work fine when I test it with other tools, but my JavaScript implementation isn’t functioning as I expected.

Here’s the example code from RapidAPI for XMLHttpRequest:

var requestData = null;
var request = new XMLHttpRequest();
request.withCredentials = true;

request.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        console.log(this.responseText);
    }
});

request.open("GET", "https://music-extractor-api.p.rapidapi.com/download/abc123def");
request.setRequestHeader("x-rapidapi-host", "music-extractor-api.p.rapidapi.com");
request.setRequestHeader("x-rapidapi-key", "[API_KEY_HERE]");

request.send(requestData);

And here’s my implementation:

<!DOCTYPE html>
<html>
<head>
    <title>API Test Page</title>
</head>
<body>
    <h1>Testing RapidAPI Connection</h1>
    <button onclick="fetchData()">Get API Data</button>
    <div id="result"></div>

    <script>
    function fetchData() {
        var apiRequest = new XMLHttpRequest();
        apiRequest.withCredentials = true;
        var endpoint = 'https://music-extractor-api.p.rapidapi.com/download/xyz789abc';
        
        apiRequest.onreadystatechange = function() {
            if ((this.readyState == 4 && this.status == 200) || (this.readyState === this.DONE)) {
                document.getElementById("result").innerHTML = "Response: " + this.responseText;
            }
        };
        
        apiRequest.open("GET", endpoint);
        apiRequest.setRequestHeader("x-rapidapi-host", "music-extractor-api.p.rapidapi.com");
        apiRequest.setRequestHeader("x-rapidapi-key", "[MY_API_KEY]");
        apiRequest.send();
    }
    </script>
</body>
</html>

The strange part is that the output shows "Response: " but no actual data follows. I’m receiving proper JSON error messages when I provide an invalid API key, indicating the connection is established. However, with a valid key, the responseText appears to be empty.

What could be causing this? Am I missing something in the request configuration?

2

Your condition logic is probably the issue. You’re checking status == 200 AND readyState === this.DONE with an OR operator, but this.DONE equals 4 - so you’re basically checking the same readyState twice. Split this up: check readyState === 4 first, then handle the status code separately. Also, that music extractor API sends back different content types all the time. I’ve seen it return audio file data or metadata that won’t display right with innerHTML. Log this.status and this.getResponseHeader('content-type') to see what you’re actually getting back. Empty responseText usually means the API sent binary content or something XMLHttpRequest can’t parse as text.

3

check for cors issues first. add error handling to your onreadystatechange - don’t just check for status 200, look at other codes too. the music api might be returning binary data instead of text, which would make responsetext empty even on successful requests.

4

Your empty responseText happens because the music extractor API returns binary audio data, not JSON text. When XMLHttpRequest gets binary content, responseText comes back empty or corrupted. Set the responseType before sending your request - add apiRequest.responseType = 'blob'; after your open() call, then use this.response instead of this.responseText. Also ditch the withCredentials setting. Most RapidAPI endpoints don’t need it and it can trigger preflight requests that fail. If you’re expecting JSON metadata rather than audio files, double-check the endpoint docs to make sure you’ve got the right URL path.