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.
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.
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.
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.
Place the
client.htmlandxda.jsfiles in ServerA.Place the
server.htmlfile in ServerB.Declare
xda.jsin the main page: <script type="text/javascript" src="xda.js"></script>.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>
Use this function (here it is bound to a button's onclick event):
<button onclick='test()'>test cross-domain</button>.