Need help with Random Quote Machine - XMLHttpRequest

Need help with Random Quote Machine - XMLHttpRequest
0

#1

I am trying to call a REST API with JavaScript and XMLHttpRequest.
The URL is: “http://quotes.stormconsultancy.co.uk/random.json

This works from the browser window, but when I try to run it as javascript in the browser, it always returns a status of 0
(Even when I substitute the URL with any another URL for a simple GET request - for e.g. http://www.yahoo.com, I still get the same result.

Here is the code:

(function callRestAPI() {
  var request = new XMLHttpRequest();
  var url = "http://quotes.stormconsultancy.co.uk/random.json";

  request.onreadystatechange = function () {
    if (request.readyState === XMLHttpRequest.DONE) {
      if (request.status === 200) {
        alert("The response was: " + request.responseText);
      } else if (request.status === 0) {
        alert("The response was a status code of 0");
      }
    }
  };
  request.open("GET", url, "false");
  request.send();

})();

I am at a loss on how to figure this out. Any help would be appreciated.

(Note: I get the same result when I run it locally from a file on my computer and also from codepen.io (http://codepen.io/jaytsecan/pen/MeyVjb)
(I am using Firefox 47 and Chrome 51 to test locally)

Thanks,

  • Jay

#2

I’m ony phone right now so can’t test your code. Do you have a server running? Try Python simple server or get http-server from npm
I think that’s how I solved a similar issue before


#4

I tried it with python simple server running. I get the same result (status of 0)

I’m assuming that XMLHttpRequest can be used for any GET request, and most simple GET requests (like getting the page at www.amazon.com) don’t need to have any headers set.

So why won’t it work? I have a feeling there is something wrong with my javascript code (or the way I’m calling it), but can’t figure it out…


#5

I had sucessfully made your code works by using a different API, and by putting request.open before request.onreadystatechange.

Do you have any obligation to use XMLHttpRequest ? I find using $.ajax or $.getJSON much more simpler


#6

Yes, I can probably try jQuery.

The reason I was using XMLHttpRequest is that I want to learn how to do this in JavaScript.

I was reading up on CORS, since this is the problem I usually get:

These are the automatic request headers for the GET request sent by Firefox:

So, apparently I get:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote
resource at http://quotes.stormconsultancy.co.uk/random.json. (Reason:
CORS header ‘Access-Control-Allow-Origin’ missing).

Is there any client-side solution to this? (I know others at FCC have made it work using jQuery, but I haven’t come across a working solution ini JavaScript yet)


#7

In fact, you were pretty much right on using XMLHttpRequest, it seems to be pretty standard when it comes to dealing with CORS.

I’ve been searching for this error a lot lately :

Reason: CORS header ‘Access-Control-Allow-Origin’ missing

And I don’t think anything can be done with Codepen concerning this, but if you are using C9 or another live server, you could set this header in the backend. Here are the interesting read I’ve had :

http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
http://enable-cors.org/server_expressjs.html


#8

Thanks Mizu.

I’m reading the links above right now. It seems to be a complex topic.
I was also looking at the book “CORS In Action” (https://www.manning.com/books/cors-in-action), but can’t really afford to buy it right now.

I will get back to this post as and when I learn more and figure out this issue.

In the meantime, I’m going to try it using a jQuery AJAX request. Interesting how it works using jQuery but not JavaScript. The jQuery library must have some special code under the hood to handle CORS maybe ?


#9

For the time being, I used the following solution to make it work in JavaScript using XMLHttpRequest :

I am using a proxy, so I changed the URL from “http://quotes.stormconsultancy.co.uk/random.json” to “https://jsonp.afeld.me/?url=http://quotes.stormconsultancy.co.uk/random.json

i.e. essentially, now my request is going to “jsop.afeld.me” with my original url as a get request parameter.

http://jsop.afeld.me seems to be some sort of proxy server (don’t really understand how it is doing its magic)

Here are some additional links I found useful on the topic of “Cross Domain Scripting” :

  1. Ways to circumvent the “Same-Origin Policy” : http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy/7910570#7910570
  2. Cross-Domain requests in Javascript : https://jvaneyck.wordpress.com/2014/01/07/cross-domain-requests-in-javascript/
  3. JSON Proxy : https://jsonp.afeld.me/
  4. Using CORS : http://www.html5rocks.com/en/tutorials/cors/
  5. Making Cross-Domain requests with CORS : https://www.eriwen.com/javascript/how-to-cors/
  6. Successful Cross Origin Resource Sharing (CORS) Using A Proxy Server : http://promincproductions.com/blog/server-proxy-for-cross-origin-resource-sharing-cors/

Hope the above links help other people with these issues too!


I'm confused with all the 'json', 'jsonp', 'localhost' and 'CORS' concepts
#10

Thanks @jaytsecan! I’ve been hacking away at this very same issue for HOURS!