Modify HTTP Headers for a JSONP request

Question

I am using jquery to build a request to the Twitter Search API. I am using jsonp, as is needed for cross-domain requests. However, the Twitter API specifies that you should set a unique User-Agent for these requests, and limits your requests if you do not. The problem is, I see no way of setting this header via jquery.

This is the code I am using:

$.ajax({
    url: 'http://search.twitter.com/search.json',
    dataType: 'jsonp',
    type: 'get',
    data: { q: 'twitter' },
    success: function(data) {
        alert(data.results);
    }
});

I have tried using the beforeSend method, but it appears that this event is not firing. Can anyone come up with any way of solving this problem?

Thanks.

Rustyrut

Answer 1

JSON with Padding works by adding a script element to the page, with the src attribute pointing to the URL of the web service. The web service then returns a script containing the data wrapped in a callback function that is executed when the script finishes parsing. It's not so much JSON (it doesn't even have to be valid JSON, for a start) as it is Plain JavaScript.

There's no way to modify the headers sent for a script element that's added to your page, unfortunately. The only thing you can do is check for a cross-origin compatible method of retrieving data, such as:

• XMLHttpRequest Level 2 - Chrome, Safari 4+, Firefox 3.5+, Opera

  // Is XMLHttpRequest Level 2 supported?
  if ("withCredentials" in new XMLHttpRequest()) 

• XDomainRequest - for IE 8, IE 9

  // Is XDomainRequest supported?
  if ("XDomainRequest" in window)

It would be a good idea to test for these implementations if they exist and use them accordingly, falling back to standard JSONP for unsupported or older browsers.

It's also possible (but unlikely, given that it's high profile) that the web service isn't set up to allow cross-origin requests, so you may still have to fall back to JSONP if the request fails. See also, Cross-Origin Resource Sharing.

Denadenae

Ah, that is incredibly unfortunate. I think I will fall back on using a wrapper script written in PHP that goes out and gets the data. That way, I can cache the search, so maybe it's a win-win (though it means more work). Thanks for the detailed answer. – Rustyrut

Answer 2

Try this :

// OAuth configurations   
    var config = {
      'client_id': 'xxxxxx.apps.googleusercontent.com',
      'scope': 'https://www.google.com/m8/feeds/contacts/default/full'          
    };

gapi.auth.authorize(config, function(data) {
      // login complete - now get token
      var token = gapi.auth.getToken();
      token.alt = 'json';
      // retrieve contacts
      jQuery.ajax({
        url: 'https://www.google.com/m8/feeds/contacts/default/full/?max-results=999999',
        dataType: 'jsonp',
        data: token,
        success: function(data) { successGmail(data); }
      });
    });

I found it there : https://groups.google.com/d/msg/google-api-javascript-client/GuFxPzqQ9-0/hZpo041UaH4J

Farley