Question

I am trying to retrieve JSON formatted data from a remote domain (Zencoder video encoding API) in a jQuery script. When the script runs, it returns code 200 but Firebug shows an error (bold red highlight, circle with an X) on the address, and the response is empty.

Here is the jQuery script relating to this:

var checkStatus = function(jobID) {
        var url = 'https://app.zencoder.com/api/v2/jobs/' + jobID + '/progress.json?api_key=asdad3332d';
        $.getJSON(url, function(data) {
            if (data.state == 'processing') {
                    //Do things to indicate job is still going
                    //Repeat this function to check status again
                    setTimeout(function() {
                        checkStatus(jobID);
                    }, 6000);
                } else if (data.state == 'finished') {
                    //Do some stuff
                } else if (data.state == 'failed') {
                    //Show errors, do other stuff
                }
            });
     };

And here is an example of JSON returned.

{"outputs":[{"id":18492554,"state":"finished"},{"id":18492553,"state":"finished"},{"id":18492555,"state":"finished"}],"input":{"id":12437680,"state":"finished"},"state":"finished"}

Finally, here are the response headers returned by Firebug:

Response Headers
Cache-Control   private, max-age=0, must-revalidate
Connection  close
Content-Length  174
Content-Type    application/json; charset=utf-8
Date    Thu, 09 Feb 2012 16:06:13 GMT
Etag    "48f2d50a838e0e1e433f7c0ba197e787"
Server  ZenServer 0.1.0
X-Zencoder-Rate-Remaining   4999

Any help would be appreciated here. Scratching my head on this one

DOCUMENTATION
Here is the API documentation referring to obtaining the job progress, which is what I am trying to do..
https://app.zencoder.com/docs/api/jobs/progress

Answer 1

You’ll need to use jsonp for cross-domain requests, and the server will need to be able to accept jsonp requests and answer appropriately.

$.ajax({
    url: 'https://app.zencoder.com/api/v2/jobs/1234/progress.js?api_key=asdf1234',
    dataType: 'jsonp',
    success: function(data){// your code here
    }
});

jQuery will append the callback=blah parm automatically.
See here the dataType section here: http://api.jquery.com/jQuery.ajax/

The data parm in the success function will contain the object (not just a JSON string, but the object represented by the JSON string).