0

I've been trying to make an API call to giflayer in order to download a .gif file. I seem to be making some simple error. No matter what I try, the request never progresses past readyState 1

    function sendGifAPI(){
      //called when the user presses the "creategif" button
      makeRequest(function(result){
        document.getElementById("readystate").innerHTML = result;
      });
    }

    function makeRequest(handleResponse){
      var req = new XMLHttpRequest();
      var headerss = req.getAllResponseHeaders();
      req.onreadystatechange = function() {
        if(req.readyState === 1){
          document.getElementById("readystate").innerHTML = "1";
        }
        if(req.readyState === 2){
          document.getElementById("readystate").innerHTML = "2";
        }
        if(req.readyState === 3){
          document.getElementById("readystate").innerHTML = "3";
        }
        if(req.readyState === 4){
          if(req.status === 200){
            document.getElementById("readystate").innerHTML = "4";
            handleResponse(req.response);
          }
        }
      };
      req.open("GET", "http://apilayer.net/api/capture?access_key=8b29be98c80dbc3e7f3b04b03b3b2cd5&url=https://www.youtube.com/watch?v=3W6hZR29l5o&start=10&end=15");
      req.send();
    }
<!DOCTYPE html>
<html>
  <body>
    <p id="readystate"></p>

    <input type="button" onclick="sendGifAPI()" value="Create Gif">
    
    <img id="gifloader" />
  </body>
</html>
Binit Shah
  • 61
  • 5
  • What do you want to do with the gif? – slebetman Dec 28 '15 at 08:46
  • Your XMLHttpRequest Ajax call is asynchronous (that's what the "A" in Ajax stands for). That means the `onreadystatechange` callback is called sometime in the future AFTER your `console.log(req.status)` has executed. You need to use the result of the ajax call inside the callback function. See the question yours was marked a duplicate of for a much fuller description of the issue/solutions. – jfriend00 Dec 28 '15 at 08:49
  • @slebetman the call return a gif. I'm trying to download it – Binit Shah Dec 28 '15 at 22:03
  • You've used snippets to make a live demo … but it is missing the HTML or any way to trigger any of the JS functions … and it looks like you've killed the access key so we wouldn't be able to call the API correctly anyway. – Quentin Dec 28 '15 at 22:11
  • @jfriend00 I've edited the question's code to make it asynchronous, but no matter what I try, the readyState never progress past 1 – Binit Shah Dec 28 '15 at 22:12
  • I'll add them in now @quentin – Binit Shah Dec 28 '15 at 22:13
  • 1
    Look at the console in your browser's developer tools. You have a very common error that you can easily google for: XMLHttpRequest cannot load http://apilayer.net/api/capture?access_key=8b29be98c80dbc3e7f3b04b03b3b2cd5&url=https://www.youtube.com/watch?v=3W6hZR29l5o&start=10&end=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. – Quentin Dec 28 '15 at 22:34
  • @BShah: Yes you're trying to download it. But what do you want to do with the gif? Save it to disk? Save it to your server? Calculate how many red pixels there are in the gif? If you are trying to display it on the web page then XMLHttprequest is the wrong thing to do. – slebetman Dec 29 '15 at 04:40
  • @slebetman I'm trying to save it to the disk – Binit Shah Dec 29 '15 at 06:05
  • @Quentin perhaps I'm understanding the "Access-Control-Allow-Origin" header incorrectly, but here's what I've gathered. website A's code cannot GET/POST/etc Website B because the website A's code could be attempting to do something malicious. What this means for me, since I am website A and I am trying to GET from website B, is that I have to make a cross-origin-request, which depends on the server (apilayer.net) having set the "Access-Control-Allow-Origin" header in order to allow me access. So, I've followed a COR guide to fix my code, but it did not change anything. readyState remains 1 – Binit Shah Dec 29 '15 at 06:15
  • @BShah — I just looked at the headers sent by apilayer.net and I don't see Access-Control-anything in there. You haven't configured apilayer.net to use CORS correctly. – Quentin Dec 29 '15 at 11:34
  • @Quentin - I don't own apilayer.net however. How can i configure it to use CORS? Furthermore, the folks at apilayer are selling this service, clearly it must be working for other people. – Binit Shah Dec 29 '15 at 20:21
  • You can't give your own JavaScript permission to access content another site is willing to give to your visitors' browsers. Presumably the service is intended for use by (for example) server side code which can save the results locally before providing it to end users. – Quentin Dec 29 '15 at 20:55

0 Answers0