Usages of jQuery's ajax crossDomain property?

Question

According to jQuery :

crossDomain (default: false for same-domain requests, true for cross-domain requests) Type: Boolean If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. This allows, for example, server-side redirection to another domain. (version added: 1.5)

I don't understand the above.

If the code is

$(document).ready(function () {     $.ajax(     {         url: 'http://es3.com/Handlers/MyHandler.ashx',         cache: false,         dataType: "jsonp",         ...         ...     }); });  function aaa(json) {     alert(json.result); } 

And im specifiying datatype:jsonp, then the response is going to be application/javascript mime typed , becuase it's a script which will run in my browser.

I dont see any reason why it would not act like that when I'm running this code under the same domain. ( hence - I don't see the usages for this property).

I have made a sample

I have 2 (host tweaked) domains. es2.com and es3.com.

(notice , the url in the code is always to es3.com)

Test #1 :

Run the code from es3.com : (left pane)
Run the code from es2.com : (right pane)
crossDomain:false (default when missing).

look at the differences : (http://i.stack.imgur.com/RKyZp.jpg)

Test #2 :

Run the code from es3.com : (left pane)
Run the code from es2.com : (right pane)
crossDomain:true <--- notice

(http://i.stack.imgur.com/xEcyd.jpg)

I don't see any difference.

Question :

Why / When do I need to set the crossDomain property ?

Answer 1

The default for crossDomain is as follows:

false for same-domain requests, true for crossDomain requests

The data-type is interpreted differently depending on the value for the crossDomain setting:

"json": Evaluates the response as JSON and returns a JavaScript object. Cross-domain "json" requests are converted to "jsonp" unless the request includes jsonp: false in its request options

Because you are using jsonp instead of json you won't see any difference in your tests.

When do I need to set the crossDomain property ?

If you are making a same domain json request, and your site may redirect the request to another domain to serve the response (via HTTP 3XX), then you should set the crossDomain property to true so the response can be read by your calling script.

This gives you the advantage of retrieving JSON when making same origin requests, and the functionality of JSONP when making cross-origin requests. If CORS is active on the domain you redirect to then you can set jsonp: false in the request options.

Examples

Making a request from example.com to example.org.

• crossDomain automatically set to true.
• Data type set to jsonp.

Result: JSONP returned by example.org.

Making a request from example.com to example.com.

• crossDomain automatically set to false.
• Data type set to jsonp.

Result: JSONP returned by example.com.

Making a request from example.com to example.org.

• crossDomain automatically set to true.
• Data type set to json.

Result: JSONP returned by example.org.

Making a request from example.com to example.com.

• crossDomain automatically set to false.
• Data type set to json.

Result: JSON returned by example.com.

Making a request from example.com to example.org.

• crossDomain automatically set to true.
• Data type set to json.
• jsonp is set to false.
• example.org does not support CORS for example.com

Result: CORS error returned by browser.

Making a request from example.com to example.com, example.com redirects AJAX to example.edu.

• crossDomain manually set to true.
• Data type set to json.

Result: JSONP returned by example.edu.

Making a request from example.com to example.org.

• crossDomain automatically set to true.
• Data type set to json.
• jsonp is set to false.
• example.org does support CORS for example.com

Result: JSON returned by example.org.

Making a request from example.com to example.com, example.com redirects AJAX to example.edu.

• crossDomain automatically set to false.
• Data type set to json.
• example.edu does not support CORS for example.com

Result: CORS error returned by browser.

Answer 2

Lets assume , you have have another domain spanish.es2.com which serves spanish users of your website.

You have the following requirement :

1. Having a webpage on es2.com

2. Call an api on es2.com and pass it some user info ( or cookie ), and get some user data. But if the user is spanish, the api on spanish.es2.com needs to be called for same data.

3. When you do an ajax request with jQuery from es2.com to es2.com, for a spanish user :

   (a) With crossdomain disabled : Your es2.com api will find that the user is spanish, and hence do a http redirect to spanish.es2.com , which will not work due to ajax same domain policy and the ajax would fail. Redirects in ajax url -> Disallowed.

   (b) With crossdomain enabled : Your es2.com api's jsonp response,is actually loaded as a script tag wrapped in a function, hence a http redirect to other domain does not matter, and the content is still loaded, hence the ajax works. Redirects in src of a script tag -> Allowed.

Hope this makes it clear.