Get JSON from subdomains with jQuery

Question

I have user1.mydomain.com and user2.mydomain.com domains. I use api.mydomain.com to deal with my web app over AJAX/JSON. So, I want to make a POST request from user1.mydomain.com to api.mydomain.com/projects using jQUery something like this: {'action':'getActiveProjects'} to get list of active projects for user1 in JSON as a result. I found $.getJSON method but it seems there is no option for sending some data to server, just GET method. The other problem I face is same origin policy. So, how can I POST some JSON to server on another subdomain and get JSON response as a result?

Answer 1

You cannot use Ajax/JSON, since subdomains are individual domains. You can, however use JSONP. jQuery has this built in, so you only need to specify that in your request. Have a look at the relevant docs. You cannot use POST with JSONP (this is limited by the way this technique works), but there is no other way to do cross-browser cross-domain requests.

Answer 2

Set the document.domain to the main domain

document.domain = "mydomain.com"

More info here

Answer 3

Using $.ajax and JSON-P by specifying the dataType: "jsonp". Details in the linked docs. Your server will have to respond with JSON-P rather than just JSON, but that's pretty easy to do if you control the server.

Alternately, if you only need to support fairly recent browsers (and not IE), you can set up your server to support CORS. But that's only supported in recent browsers, and although IE8 supports it, it doesn't support it transparently through the usual XMLHttpRequest object, but instead requires a completely different transport object (XDomainRequest), which jQuery doesn't handle automatically for you (yet).

Here's a JSON-P example using jQuery:

$.ajax({
  // The source URL
  url: "http://jsbin.com/ubucu4",

  // Tell jQuery you're doing JSON-P
  dataType: "jsonp",

  // Include some data with the request if you like;
  // this example doesn't actually *use* the data
  data: {some: "data"},

  // You can control the name of the callback, but
  // usually you don't want to and jQuery will handle
  // it for you. I have to here because I'm doing this
  // example on JSBin.
  jsonpCallback: "exampleCallback",

  // Success callback
  success: function(data) {
    display("Received data, typeof data = " + typeof data);
    display("data.foo = " + data.foo);
    display("data.bar = " + data.bar);
  },

  // Error callback      
  error: function(jxhr, status, err) {
    display("Error, status = " + status + ", err = " + err);
  }
});

Live copy

On the server, you'll see that jQuery has added a callback parameter to the URL, e.g. in the above it would be http://jsbin.com/ubucu4?callback=exampleCallback but if you like jQuery control it the name will be a bit more exotic. Your server-side code should construct a response that is a JavaScript function call, calling that function. My response in the above example is:

exampleCallback({
    "foo": "This is foo",
    "bar": "This is bar"
});

This all happens because instead of using XMLHttpRequest, which is subject to the Same Origin Policy, JSON-P uses a dynamically-added script tag (which is fine). In my example, the tag will look something like

<script type='text/javascript' src='http://jsbin.com/ubucu4?callback=exampleCallback'></script>

The browser will retrieve the script, which is your JSON-P response, and execute it. That means the callback gets called, and your data is supplied to your script.

Your JSON-P response isn't, technically, JSON; it's JavaScript, and for that reasons it's essential that you only use JSON-P with servers you trust (such as your own subdomain servers), since you're injecting code directly into the page. Otherwise, if you're using some server you can't trust, the code that gets injected may well read information off the page and send that to some third party. Let caution by your watchword.