jQuery.ajax call to Twitter succeeds but returns null for Firefox

Question

I've got code that makes a simple get request to Twitter (search) using jQuery's Ajax method. The code works fine on Safari, but fails on Firefox (3.6.3). In the Firefox case, my jQuery.ajax parameters 'success' method is invoked, but the supplied data is null. (In Safari, I receive a lot of JSON data.)

My Ajax call is:

$.ajax({
    url: 'http://search.twitter.com/search.json?q='+searchTerm,
    dataType: 'json',
    async: true,
    beforeSend: function(request) {
        window.console.log('starting AJAX request to get Twitter data');
    },
    success: function(data, textStatus, request) {
        window.console.log('AJAX request to get Twitter succeeded: status=' + textStatus);
        callback(data);
    },
    error: function(request, status, error) {
        window.console.log('Ajax request to get user data --> Error: ' + status);
        errback(request, status, error);
    }
});

Firebug shows Response headers:

Date    Sun, 11 Apr 2010 22:30:26 GMT
Server    hi
Status    200 OK
X-Served-From    b021
X-Runtime    0.23841
Content-Type    application/json; charset=utf-8
X-Served-By    sjc1o024.prod.twitter.com
X-Timeline-Cache-Hit    Miss
Cache-Control    max-age=15, must-revalidate, max-age=300
Expires    Sun, 11 Apr 2010 22:35:26 GMT
Vary    Accept-Encoding
X-Varnish    1827846877
Age    0
Via    1.1 varnish
X-Cache-Svr    sjc1o024.prod.twitter.com
X-Cache    MISS
Content-Encoding    gzip
Content-Length    2126
Connection    close

The HTTP status is OK (200), the Content-Type is properly application/json, and the Content-Length of 2126 (gzip'd) implies data came back. Yet, Firebug shows the Response to be empty, and a test of the supplied data shows it to be 'null.'

I am aware of a similar post on Stack Overflow, jQuery $.get() function succeeds with 200 but returns no content in Firefox and from that would assume this problem is possibly related to cross-domain security, but... I know there are many JavaScript widgets and whatnot that Ajax get data from Twitter. Is there something I need to enable to allow this?

Answer 1

You are attempting to make a cross domain Ajax call. For this to happen you need to use JSONP.

JQuery understands JSONP and it will handle all the underlying tricks for you.

You only need to add the parameter &callback=? to your URL and JQuery will make the request as a Cross domain call. More important is, it will understand and handle the JSONP response from the server, so for you it will be transparent.