Geek Answers Handbook

JQuery.ajax call bit.ly returns results in IE but not FF or Chrome

I am trying to call the bit.ly url shortening service using jQuery with a .ajax call.

update I wonder if this is a cross-domain security issue? I call from mysite.com to bit.ly

 <html><head> <script type="text/javascript" src="http://www.twipler.com/settings/scripts/jquery.1.4.min.js"></script> <script type="text/javascript"> jQuery.fn.shorten = function(url) { var resultUrl = url; $.ajax( { url: "http://api.bit.ly/shorten?version=2.0.1&login=twipler&apiKey=R_4e618e42fadbb802cf95c6c2dbab3763&longUrl=" + url, async: false, dataType: 'json', data: "", type: "GET", success: function (json) { resultUrl = json.results[url].shortUrl; } }); return resultUrl; } ; </script></head><body> <a href="#" onclick="alert($().shorten('http://amiconnectedtotheinternet.com'));"> Shorten</a> </body> </html>

This works in IE8, but does not work in FireFox (3.5.9), nor in Chrome. In both cases, "json" is null.

Headers in IE8

 GET http://api.bit.ly/shorten?ver..[SNIP]..dtotheinternet.com HTTP/1.1 Accept: application/json, text/javascript, */* Accept-Language: en-US Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; Media Center PC 6.0; InfoPath.2; .NET CLR 1.1.4322; .NET CLR 3.5.30729; .NET CLR 3.0.30729) Host: api.bit.ly Connection: Keep-Alive

Chrome Headers

 GET http://api.bit.ly/shorten?versio..[SNIP]..nectedtotheinternet.com HTTP/1.1 Host: api.bit.ly Connection: keep-alive User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1045 Safari/532.5 Origin: file:// Accept: application/json, text/javascript, */* Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

So, the only obvious difference is that Chrome sends "Origin: file: //" and I don't know how to stop this.

+3
source share
2 answers

Use Fiddler to check the actual request and response payload from the bit.ly service. Compare the IE request / response with Chrome to determine what is different.

My (wild) assumption would be that the service returns an error message when a request is sent by Firefox and Chrome due to differences in how browsers make the request. In particular, the way to add the url parameter seems somewhat suspicious to me, and I would encode it just in case.

Update:. In fact, the HTTP headers revealed the problem. :-)

The title is added by the user agent when he wants to suggest to the site that the request is a cross-search request. Apparently, Chrome recently added support for this header. And of course:

Origin header details: still ending. We will update the implementation in Google Chrome as the specification evolves based on feedback from Mozilla and W3C and the IETF community as a whole.

You may not be able to do anything at this time to prevent this header from being sent to Chrome. By the way, it seems that the Origin title was first introduced by Firefox 3.6, and I suspect that you are one of those people who run all the latest and greatest browsers. :-)

Btw, XMLHttpRequest has cross-domain restrictions. So interestingly, jQuery.Ajax does not use the new XDomainRequest in IE8 instead of XMLHttpRequest .

But back to your problem - at the moment, everything points to the only solution available to make an Ajax call to your site and make a bit call from your server. Not optimal, I know ...

+1
source

A quick and lazy way to make this work is to use JSONP.

i.e.

 $.ajax( { url: Request, async: false, dataType: 'jsonp', data: "", type: "GET", success: function (json) { console.log(json.data.url); } });

Should work in everything.

+1
source

More articles:


All Articles