Cross Domain Ajax Request is something that is prohibited by the browser becomes it violates the Same Origin Policy. According to wikipedia, the term “origin” is defined using the domain name, protocol, port number. Two resources are considered to be the same origin if and only if all these values are exactly the same. This also implies that even if the two resources are in different subdomains, it is not allowed as well.

In order to do cross domain ajax request, there is one way to do it using JSONP. JSONP, which is short for “JSON with padding” is a complement to the base JSON data format. It provides a method to request data from a server in a different domain. This is viable because there is no restriction on including third party javascript files in the website. So here is how it works. E.g. you are requesting a server http://sampleserver.com/sampledata.json to return the following json

{ "name" : "Shanison" }

Instead of directly requesting this using XMLHttprequest, you use javascript to insert a script tag in the html,

Now the browser would send the requests and download the response, but the problem is that the response is JSON instead of javascript. So the trick here is that for server instead of returning JSON, it returns a function call with the JSON:

callBack({ "name" : "Shanison" })

After the javascript is downloaded, it will call the method callBack, which will takes the JSON as a parameter. Inside this callBack method, you can get the response of the JSON and do what ever you want.

So if you are using RAILS and JQuery, here is what you can do. Jquery provides a way to directly call ajax with JSONP as requested dataType and you don’t have to do the things as create a call back methods and create the script tag and inserted into the html. If you use jQuery, this is what you normally do ajax Request:

    $.ajax({
      url     : 'http://sampleserver.com/sampledata.json',
      type    : 'GET',
      dataType:  'json',
      success : function (response) {
        if (response['success'])
        {
          loadData(response['html']);
        }
      }
    })

To change it to use jsonp, you just need to change the dataType to ‘jsonp’, everything else remains the same. Jquery will do the magic I described for you. At the same time, it will send a parameter ‘callback’ to the server, which is the call back methods name that is generated by jQuery, it is a random name.

    $.ajax({
      url     : 'http://sampleserver.com/sampledata.json',
      type    : 'GET',
      dataType:  'jsonp',
      success : function (response) {
        if (response['success'])
        {
          loadData(response['html']);
        }
      }
    })

Now the only thing needs to be changed is on the application server. The application needs to make sure the response can return JSONP instead of JSON. If you are using Rails, to render the response in JSON, you usually do:

render :json => {:success => true, :html => prices_html}

To render the response with JSONP, which would wrap the JSON with the callback method submitted by the javascript:

render :json => {:success => true, :html => prices_html}, :callback => params[:callback]

With all this, you should be able to do Cross Domain Ajax Request using jQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.