native javascript rest api call

Question

I am trying to make api call to get spotify albums in native javascript without using any js frameworks. I am running into issues where I am unable to send Oauth token using native js. For spotify I have client id and client scret. I can either use that or the Oa

(function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.spotify.com/v1/albums", false);
    xhr.send();
    document.getElementById("results").innerHTML = xhr.responseText;
})();

score 1 · Answer 1 · answered Dec 10 '15 at 21:29

1

function request(callback) {

  var xobj = new XMLHttpRequest();
                 // true parameter denotes asynchronous
  xobj.open('GET', YOUR_URL_HERE, true);
  xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
          // This marks that the response has been successfully retrieved from the server
          // Utilize callback
          callback(xobj.responseText);
        }
  };
  xobj.send(null);
}

I would definitely recommend taking a look at the link Frobber provided. It's always better to understand why something does/doesn't work rather than just getting it to work. Here is a mock request to get you started. Hope this helps!

answered Dec 10 '15 at 21:29

Antonio Manente

359
2
12

Thanks for that code block. The problem I am running into is in exchanging my authentication details. I know with jquery ajax call we can send data parameter. But how do I achieve that using XMLHttpRequest? – ash Dec 10 '15 at 21:35
I'd take a look at this question: http://stackoverflow.com/questions/21850454/how-to-make-xmlhttprequest-cross-domain-withcredentials-http-authorization-cor You can set the optional fourth and fifth parameters of the .open() method ( being user & password respectively ) but I've seen situations where that alone will not work. He provides a concise answer and useful article in his answer – Antonio Manente Dec 10 '15 at 21:46

score 0 · Answer 2 · answered Dec 10 '15 at 21:07

I think you need to read a basic tutorial on how to use XMLHttpRequest, which you can find here

One immediate problem with your code is that it's not using any callback to read the result that comes back from the server. This is all happening asynchronously, so what's occurring in your case is that you're send()ing the request, and then immediately setting innerHTML to a value that probably isn't even available from the server yet.

Check the tutorial for how to get that information back from the server when it's ready.

Note the use of the myFunction callback, and note the use of onreadystatechange. What's happening here is that send() is sending something to the server, in a separate execution thread. You need to register a callback function that will perform the data fetching and DOM update when the server reports back that the data is available, not immediately.

I guess that's what I am looking for. I have worked using frameworks and their methods but when it boils down to use native JS, that's where is thei ssue. — ash, Dec 10 '15 at 21:23

native javascript rest api call

2 Answers2