JQuery - $.ajax ContentType Problem in Firefox

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 开发者_StackOverflow中文版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 ?

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 */)).')';

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.

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?',