JQuery - $.ajax ContentType Problem in Firefox

Question

I am using following code to make a cross domain JSON request,

$.ajax({
                type:"POST",
                crossDomain:true,
                contentType: "application/json; charset=utf-8",
                data: {
                    domain: 'domain',
                    assettypes: 'Article',
                    sortby: 'mostreadcounter_total',
                    pagesize: '3',
                    format: 'json',
                    apikey: 'apiKey'
                },
                url: 'http://www.sample.com/search',
                dataType: "json",
                success: CallSucceed,
                failure: CallFail,
                beforeSend: function(x) {
                    if (x && x.overrideMimeType) {
                        x.overrideMimeType("application/json;charset=UTF-8");
                    }
                }


            });

But my call is failing. In fiddler I see the the content type as 'text/html; charset=UTF-8' while I am explicitly setting contentType as 'application/json;charset=UTF-8.'

When I access the API using browser, it works fine and Fiddler shows the proper content type. But as soon as I make the request using JQuery, my content type switches to text/html and my request fails with a 405 error (Method not allowed.)

This is happening only in Firefox 3.6 and not in IE :( I ahve tried both Get/POSt methods, I have tried adding and removing the code in "BeforeSend" but to no avail.

Any suggestions ?

Answer 1

1. You cannot do a cross-browser ajax request with the post method, only with get

2. The cross-browser ajax request could be achieved with JSONP not with JSON, yes they are different somehow.

3. You need to be able to handle JSONP requests on your server side.

---

jQuery sample code for making a cross-domain JSONP requests

var data = {
    domain: 'domain',
    assettypes: 'Article',
    sortby: 'mostreadcounter_total',
    pagesize: '3',
    format: 'json',
    apikey: 'apiKey'
};
$.ajax({
    url: 'http://www.sample.com/search?callback=?',
    data: data,
    success: CallSucceed,
    failure: CallFail,
    dataType: 'jsonp'
});

PHP sample code for handling a JSONP request

$domain = $_GET['domain'];
$assettypes = $_GET['assettypes'];
// ... and so on

// you need the callback(success handler) name, 
// so you can pass your JSON object to it
$callback = $_GET['callback'];

echo $callback.'('.json_encode(array('success' => true, /* and so on */)).')';

Answer 2

set contentType: "application/json", omitting the encoding. JQuery always uses UTF-8 and probably isn't expecting the encoding appended to the end.

From the JQuery Documentation:

contentTypeString

Default: 'application/x-www-form-urlencoded'

When sending data to the server, use this content-type. Default is "application/x-www-form-urlencoded", which is fine for most cases. If you explicitly pass in a content-type to $.ajax() then it'll always be sent to the server (even if no data is sent). Data will always be transmitted to the server using UTF-8 charset; you must decode this appropriately on the server side.

Also note that to make Cross-Domain calls in Javascript, your remote server must implement the JSONP Standard/Hack. If the service you are calling supports it, you simply need to append a ? at the end of your URL and jQuery will take care of it.

url: 'http://www.sample.com/search?',

Answer 3

See my answer here: stackoverflow answer for cross domain ajax calls

Javascript can not make cross domain calls. The reason it "worked" in IE could be that you did a POST and didn't really look at the result. Different browsers handle this type of thing differently and IE does allow POSTs to a remote server while FF will not.

Setting up a JSP, ASP, PHP, etc...Proxy is your best bet.