XmlHttpRequest objects are bound by the same origin security policy of browsers, which prevents a page from accessing data from another server. This has put a serious limitation on Ajax developers: you can use XmlHttpRequests to make background calls to a server, but it has to be the same server that served up the current page. For more details, you can visit http://www.mozilla.org/projects/security/components/same-origin.html.

But actually writing client web applications that use this object can be tricky given restrictions imposed by web browsers on network connections across domains. So you need to find the way to bypass this limitation of AJAX.

To describe our method for cross-domain AJAX solution, let's consider the following scheme contains of 3 components:

1). User agent (a browser).

2). ServerA contains a main page with dedicated client and server IFRAMEs (see below) and an HTML client page (client.html) referenced from the client IFRAME. This client page contains dedicated script to push the data for request into server IFRAME.

3). ServerB contains remote service that want get access to and an HTML server page (server.html) referenced from the server IFRAME. This server page contains dedicated script to push the requested data into client IFRAME.

1) A Browser requests the Start page from the ServerA

2) The Start page is retrieved from the ServerA.

3) Create in the start page IFRAME (name it - "client iframe") and insert it in the document from ServerA (client.

4) In "client iframe" create ne IFRAME element ("server iframe") and insert it in the document from ServerB (server.html). Documents (client.html and server.html) contain special script that can transfer data between ifarmes.

5) "Client iframe" transfer information about HTTP method and URL that we want do cross-domain request to "server iframe".

6) "Server iframe" do simple XmlHttpRequest to the service that we need (it can do that because download from same domain) and get informaton from service.

7) "Server iframe" transfer data to "client iframe" and now we get information that we want.

1). Place the file client.html and xda.js on the serverA.

2). Place the file server.html on the serverB.

3). Declare xda.js in the main page.

<script type="text/javascript" src="xda.js"></script>

4). Create JS function which performs cross domain call as in the following example:

<script type="text/javascript">                                                                                                                                                                                                                                                  
  function test(){                                                                                                                                       
                var facade = xdaInit();                                                                                                                  
                facade.clientURI = "http://localhost/cross-domain-ajax/client/client.html";                                                              
                facade.serverURI = "http://localhost:8080/cross-domain-ajax/server/server.html";                                                         
                facade.apiURI = "http://localhost:8080/cross-domain-ajax/server/test.txt";                                                               
                facade.method = "POST";                                                                                                                  
                facade.load = function(result) {                                                                                                         
                                alert(result.responseText);                                                                                              
                }                                                                                                                                        
                facade.setRequestHeader("keep-alive","200");                                                                                             
                xda.create(facade);                                                                                                                      
        }                                                                                                                                                
</script>

5). Use this function (here it is bound to a button's onclick event).

<button onclick='test()'>test cross-domain</button>