Converting jquery code to prototype for a cross browser Ajax request in order to obtain Latest Tweets

Question

Converting jquery code to prototype for a cross browser Ajax request

My first post !

I had to fetch my latest tweet and so had to perform a cross browser request. The current app uses prototype, but I am somewhat familiar with jquery.

So, I began in jquery as :

$.ajax('http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&callback=?', {
  dataType: "jsonp",
  success:function(data,text,xhqr){
    $.each(data, function(i, item) {
      console.log(item.text);
    });
  }
});

I get a warning as :

'Resource interpreted as Script but transferred with MIME type application/json.'

But, I do get to see my last tweet. Fine.

So, I decided to do the same in prototype and then try eliminating warnings, if any. But, I got nowhere near even after trying for hours.

This is what I came up with initially in prototype. I had a lot of changes/alterations that followed but none worked.

new Ajax.Request('http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&callback=?', {
  contentType: "jsonp",
  onSuccess:function(transport){
    console.log(transport) ;
  }
});

The request succeeds but the response text is nil / " " . I get no error in Firefox but in Chrome the error is :

XMLHttpRequest cannot load http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&callback=?. Origin http://localhost:4000 is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

Any help shall be greatly appreciated. Thank you.

Answer 1

Thanks Darin for getting me back onto Dandean's JSONP for prototype js.

Although I did not mention in the first place(the question was getting a bit long), I had tried using Ajax.JSONRequest from Dandean (the very link you are referring to). The request was constantly getting failed, and I didnt go further into using it as I was assuming it would be pretty straight forward getting it done in prototype too, like jquery. As I got no more answers, justifiably so, I decided to wrap my head around using Ajax.JSONRequest. The request failure was not due to a gateway timeout. It was because the request url had params callback repeated in it.

So, the request url turned out to be

GET (twitter.com/status/user_timeline/apocalyptic_AB.json?count=1&&callback=?&callba‌ck=_prototypeJSONPCallback_0) 

Thus, I defined my url without callback and it performed as desired. However, I still get a warning :

Resource interpreted as Script but transferred with MIME type application/json

Here is the equivalent prototype :

new Ajax.JSONRequest('http://twitter.com/status/user_timeline/apocalyptic_AB.json?count=1', {
    onSuccess:function(response){
    response.responseJSON.each(function(item){
        console.log(item.text);
    });