Why does a “200 OK” jQuery GET request return an empty string when reading Tumblr “Liked” posts using Basic Auth?

Question

...when I can access the data using the direct URL » http://www.tumblr.com/api/likes?email=myemail@gmail.com&password=mypassword&debug=1, which gives me the posts I'm looking for:

Array
(
    [posts] => Array
        (
            [0] => Array
                (
                    [id] => 1482002179
                    [url] => http://staff.tumblr.com/post/1482002179
                    [url-with-slug] => http://staff.tumblr.com/post/1482002179/the-new-dashboard-for-iphone
                    [type] => photo
                    [date-gmt] => 2010-11-04 21:19:33 GMT
                    [date] => Thu, 04 Nov 2010 17:19:33
                    [bookmarklet] => 0
                    [mobile] => 0
                    [feed-item] => 
                    [from-feed-id] => 0
                    [unix-timestamp] => 1288905573
                    [format] => html
                    [reblog-key] => 8LVzAqTT
                    [slug] => the-new-dashboard-for-iphone
                    [liked] => 1
                    [note-count] => 2378
                    [tumblelog] => Array
                        (
                            [title] => Tumblr Staff
                            [name] => staff
                            [cname] => 
                            [url] => http://staff.tumblr.com/
                            [timezone] => US/Eastern
                            [avatar_url_16] => http://28.media.tumblr.com/avatar_013241641371_16.png
                            [avatar_url_24] => http://26.media.tumblr.com/avatar_013241641371_24.png

... and so on.

But no such luck when I try to achieve the same using jQuery code where I'm using this GET request with authenticated read as noted in the Tumblr REST API docs:

   $.GET(
     "http://www.tumblr.com/api/likes", 
     { email: "myemail@gmail.com", password: "mypassword" }
   );

I'm monitoring responses using Firebug. Status: 200 OK. Response: empty. XML: no element found.

Tracing out the response using:

   $.GET(
     "http://www.tumblr.com/api/likes", 
     { email: "myemail@gmail.com", password: "mypassword" },
     function( data ){ 
        alert( data ); 
     }
   );

displays an empty alert message.

I get the same result no matter where I run the code from be it file:///, localhost( XAMPP ), my own server or right from within my theme on mysite.tumblr.com.

Am I missing something? I could achieve this with JavaScript + PHP, cURL etc but I'm looking for JavaScript-only solutions.

Answer 1

It sounds to me like you're running into the Same Origin Policy. You can't use Ajax to load data from just anywhere, you're limited to loading data from the same origin as the original document (not the script, the HTML document).

Assuming that's the problem, then:

If both the browser and remote site support CORS and your origin is acceptable to the remote site, you can use that. But note that right now, only some browsers support it (and IE only supports it if you make a special effort, whereas other browsers support it as part of their XmlHTTPRequest object support, which is what jQuery's get uses under the covers).

You can probably use JSONP if tumblr supports it, though, which jQuery has support for in its .get call (not .GET as in your code examples).

Another option is to use Yahoo! Query Language as a cross-domain proxy.

Answer 2

Are you sure your getting a 200? perhaps try this to be sure the response should = "success" if everything went ok - as far as I am aware the callback function gets called regardless of the outcome.

$.GET(
 "http://www.tumblr.com/api/likes", 
 { email: "myemail@gmail.com", password: "mypassword" },
 function( data, response ){ 
    alert( response ); 
 }

);

Maybe it's something simple like a / at the end of you're URL

I typically do ajax posts like this

$.post(
 "http://www.tumblr.com/api/likes", 
 { email: "myemail@gmail.com", password: "mypassword" },
 function( data, response ){
    if(response == "success")
    {
        //inject data into page
    }
    else
    {
        alert("Ooops something went wrong... please try again.");
    }

 }

);

And the documentation for $.get states that:

If a request with jQuery.get() returns an error code, it will fail silently unless the script has also called the global .ajaxError() method.