3.5. Framework for cross-domain AJAX

eXo Web Service provides a framework to cross-domain AJAX. This section shows you how to use this framework.

You can checkout the source code at https://github.com/exoplatform/ws/tree/master/exo.ws.frameworks.javascript.cross-domain-ajax.

Motivation

The 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 the AJAX developers. That is, 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. Visit http://www.mozilla.org/projects/security/components/same-origin.html for more details.

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.

Working scheme

To describe the method for the cross-domain AJAX solution, consider the following scheme that contains 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 IFRAME client. This client page contains the dedicated script to push data for request into the IFRAME server.

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

Working sequence

1. A browser requests the Start page from ServerA, so the Start page is retrieved from ServerA.

2. Create one IFRAME element ("client iframe") in the Start page IFRAME and insert it in the document from ServerA (client.html).

3. In "client iframe", create one 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 iframes.

4. "Client iframe" transfers information about HTTP method and URL that you want to do cross-domain request to "server iframe".

5. "Server iframe" does simple XmlHttpRequest to the service that you need (it can do that because it downloads from the same domain) and gets information from service.

6. "Server iframe" transfers data to "client iframe" and now you get information that you want.

How to use?

  1. Place the client.html and xda.js files in ServerA.

  2. Place the server.html file in ServerB.

  3. Declare xda.js in the main page: <script type="text/javascript" src="xda.js"></script>.

  4. Create the 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>.

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus