Making jQuery $.ajax call to Twitter API 1.1 search

Question

Here is a very simple example of a call to Twitter's search API to get all tweets from a tag known to have tweets, #fml.

I believe I am correctly using the application-only authentication as explained here: https://dev.twitter.com/docs/auth/application-only-auth (see Step 3 for example of a call)

I am being asked for a solution that does not involve any server-side code so I am including the bearer code in the javascript, which isn't good to begin with, but....

I would expect this code to work. Instead it produces the error '400 (Bad Request)'. Any ideas?

$.ajax({
    url: "https://api.twitter.com/1.1/search/tweets.json",
    dataType: "jsonp",
    data: "q=%23fml",
    beforeSend:  function (xhr) { 
             xhr.setRequestHeader ("Authorization", "Bearer XXmyBearerCodeXX"); 
            },
    success: function(json){ alert(json); }
});

EDIT 1 - Validated Twitter call

Using hurl.eu I was able to get a successful response from the API with the above query and Authorization header, so I assume this means my Twitter call is correct, just not set up correctly within jQuery.ajax(), but I just don't see what is missing.

@Ohgodwhy, I guess I thought that since the consumer key is encoded within the bearer code I didn't need to pass another API key. Which key should be sent and where? — kscott, Jun 08 '13 at 21:54
@Ohgodwhy, just to make sure I tried the call with nothing but the bearer code through hurl and it does return data — kscott, Jun 08 '13 at 22:21

score 6 · Accepted Answer · edited May 23 '17 at 12:24

6

You cannot set request headers using AJAX calls with dataType JSONP.

See this question: Set Headers with jQuery.ajax and JSONP?

The best solution is to use a server-side proxy to do the search for you. I know you are looking for a client only solution, but with this restriction, and with no way around CORS, this is how it seems to be done today for the Twitter API.

Edit It may be possible using a proxy like Yahoo's YQL if you don't have access to one.

edited May 23 '17 at 12:24

Community

1
1

answered Jun 08 '13 at 23:01

mccannf

16,619
3
51
63

Great info...not the answer I was looking to hear though :( – Clayton Selby Aug 27 '13 at 15:43

score 0 · Answer 2 · answered Sep 05 '13 at 02:11

on your severside create a jsp or servlet and from the client side make a JSON call to the .jsp/servlet and that will return back the json object to the javascript. In serverside use the twitter4j api. sample code: `

$.getJSON(http://localhost:8080/test.jsp?callback=?",
            {
                jspqueryStr : queryStr,
                jspgeocodeStr : geocodeStr,
                lat:latStr,
                lan:lngStr, 
                radius:radiusStr,
            }, displayResult);
//This function returns the data as json object from server.
function displayResult(data) {}

In the jsp the code is like below

<%
String jspqueryStr = request.getParameter("jspqueryStr");
String jspgeocodeStr = request.getParameter("jspgeocodeStr");
String diseasename = request.getParameter("jspqueryStr");
String lat = request.getParameter("lat");
String lan = request.getParameter("lan");
String radius = request.getParameter("radius");

Gson gson = new Gson(); 
String json = gson.toJson(tweetList);
json = request.getParameter("callback") + "(" + json + ");";
out.println(json);

public List<Status> searchstream(){
//here all the twitter4j api code to get the data 
retrun tweetList;
}

%>
`

Thanks for the answer, in this particular case I do not have the ability to use any server-side code. — kscott, Sep 10 '13 at 00:14

Making jQuery $.ajax call to Twitter API 1.1 search

2 Answers2