ajax corss,javascript - AJAX cross domain call - Stack Overflow

I use this code for cross domain ajax call, I hope it will help more than one here. I'm using Prototype library and you can do the same with JQuery or Dojo or anything else:

Step 1: create a new js file and put this class inside, I called it xss_ajax.js

var WSAjax = Class.create ({

initialize: function (_url, _callback){

this.url = _url ;

this.callback = _callback ;

this.connect () ;

},

connect: function (){

var script_id = null;

var script = document.createElement('script');

script.setAttribute('type', 'text/javascript');

script.setAttribute('src', this.url);

script.setAttribute('id', 'xss_ajax_script');

script_id = document.getElementById('xss_ajax_script');

if(script_id){

document.getElementsByTagName('head')[0].removeChild(script_id);

}

// Insert into DOM

document.getElementsByTagName('head')[0].appendChild(script);

},

process: function (data){

this.callback(data) ;

}

}) ;

This class creates a dynamic script element which src attributes targets your JSON data provider (JSON-P in fact as your distant server must provide the data in this format :: call_back_function(//json_data_here) :: so when the script tag is created your JSON will be directly evaled as a function (we'll talk about passing the callback method name to server on step 2), the main concept behind this is that script like img elements are not concerned by the SOP constraints.

Step2: in any html page where you wanna pull the JSON asynchronously (we call this AJAJ ~ Asynchronous JAvascript + JSON :-) instead of AJAX which use the XHTTPRequest object) do like below

//load Prototype first

//load the file you've created in step1

var xss_crawler = new WSAjax (

"http://your_json_data_provider_url?callback=xss_crawler.process"

, function (_data){

// your json data is _data and do whatever you like with it

}) ;

D'you remenber the callback on step 1? so we pass it to the server and it will returns the JSON embeded in that method so in our case the server will return an evalable javascript code xss_crawler.process(//the_json_data), remember that xss_crawler is an instance of WSAjax class. The server code depends on you (if it's yours), but most of Ajax data providers let you specify the callback method in parameters like we did.

In Ruby on rails I just did

render :json=>MyModel.all(:limit=>10), :callback => params[:callback],:content_type => "application/json"

and that's all, you can now pull data from another domain from your apps (widgets, maps etc), in JSON format only, don't forget.

I hope it was helpfull, thanks for your patience :-), peace and sorry for code formatting, it doesn't work well