CODEWITHSUNDEEP
javascripthtmlxmlhttprequestrapidapi
Franco Polato
Franco Polato

Reputation: 85

Rapidapi Api request with XMLHttpRequest

this is my second post, I hope to be luckier than last time end get some reply. 🙂

I’m trying to make a Rapidapi api request working with javascript ”XMLHttpRequest” I must say that the api works perfectly with ios siri shortcut.

this is the code provided from apirapit site on the "XMLHttpRequest" section:

var data = null;

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

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

xhr.open("GET", "https://download-video-youtube1.p.rapidapi.com/mp3/medPORJ8KO0");
xhr.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhr.setRequestHeader("x-rapidapi-key", "[my key here]");

xhr.send(data);

And this is my code:

    <!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
xhttp.withCredentials = true;
url='https://download-video-youtube1.p.rapidapi.com/mp3/xF5t2jOsCt8';
  xhttp.onreadystatechange = function() {
    if ((this.readyState == 4 && this.status == 200 )||(this.readyState === this.DONE)) {
      document.getElementById("demo").innerHTML = "ciao" + this.responseText;
    }
  };
  xhttp.open("GET", url);
xhttp.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
xhttp.setRequestHeader("x-rapidapi-key", "[my key here]");
  xhttp.send();
}
</script>

</body>
</html>

Just to testing I created a simply bank html page to have the JSON response beneath the button just after pressing it. The result is just the string “ciao” i set before the this.responseText. If I remove the apikey or modify it with a wrong value an JSON error message appear ( so like the case posted, as I intentionally removed it). Otherwise as said noting but “ciao” string

Is there any syntax error? Is there a logical reason why it behave like this?

Thanks Franco

Upvotes: 1

Views: 309

Answers (1)

Pratham
Pratham

Reputation: 547

Trying adding a data variable as null. That's what RapidAPI provides in their code snippet.

function loadDoc() {
  const data = null
  var xhttp = new XMLHttpRequest();
  xhttp.withCredentials = true;
  url='https://download-video-youtube1.p.rapidapi.com/mp3/xF5t2jOsCt8';
  xhttp.onreadystatechange = function() {
    if ((this.readyState == 4 && this.status == 200 )||(this.readyState === this.DONE)) {
      document.getElementById("demo").innerHTML = "ciao" + this.responseText;
    }
  };
  xhttp.open("GET", URL);
  xhttp.setRequestHeader("x-rapidapi-host", "download-video-youtube1.p.rapidapi.com");
  xhttp.setRequestHeader("x-rapidapi-key", "my key here");
  xhttp.send(data);
}

Upvotes: 0

Related Questions