February 13, 2007

Cross-domain Access using AJAX-II

Intended Audience : Small/novice/experimental web-developers looking for free access to cross-domain web-services/data using AJAX.

Target Replication : Experimental/Test/Individual [Non-production]

Reader's Technical Level : Beginner's in web-development with minimal and basic introductory knowledge of AJAX.

Technical Relevance/Benefit : Cross-domain access using AJAX technology has remained a big hindrance for small-time and novice web-developers who want to freely access third-party web-services/data using AJAX on their 'domains'(such as " www.mydomain.com"). This is because most of the free as well as paid web-hosts do not allow setting up proxy server scripts on their shared web-servers for 'domains' in particular, to maintain the quality of service.However certain web-hosts allow setting up proxy scripts only on 'sub-domains'(such as "www.myname.freewebsitespace.net") for their own advertisement benefits.

Although many solutions for cross-domain AJAX requests are already in place,they cater to a very limited set of users. This article demonstrates a simple workaround method to circumvent this restriction on cross-domain AJAX requests for a highly common and widely acknowledged problem.

Problem Statement : Given a 'domain'(http://www.mydomain.com) set up on the shared web-host which does not allow setting up a proxy script(say a PHP proxy script). How can the 'domain' developer overcome this restriction of accessing cross-domain services/data using AJAX.?

Solution : This solution is not completely innovative in the sense that it actually combines two separate cross-domain solutions for AJAX, to provide a highly versatile and zero-cost solution for small-time web-application developers for their experimental/test or individual requirements.

Step 1: First register a 'sub-domain' on a web-host which allows setting up PHP proxy scripts for 'sub-domain' (such as " www.myname.freewebsitespace.net").

Step 2: Since this technique uses the Flash based AJAX solution which uses 'FlashXMLHttpRequest()' instead of the usual 'XMLHttpRequest()' function we need to place a 'crossdomain.xml' file on our 'sub-domain'. This allows us to bypass the 'Same origin policy' and send requests to any required cross-domain.

Step3: Upload a file with name 'crossdomain.xml' having the following entry <allow-access-from domain=" mydomain.com"/> in the root of your 'sub-domain' http://myname.freewebsitespace.net). This will grant permission to http://www.mydomain.com to send Flash based AJAX requests to the 'sub-domain' .Check that the file is accessible by opening the URL - http://myname.freewebsitespace.net/crossdomain.xml .

Step 4: Set up a PHP proxy server on the 'sub-domain'. php proxy scripts are freely available on net. Let's assume the proxy script is 'prx.php' and it takes the parameter 'prx_url' to fetch that particular web-service/data.

Step 5: Upload the following files (a javascript and a flash .swf file) in order to instantiate the Flash based AJAX request objects on your 'domain'.
i) 'FlashHelper.js'

Step 5: Now Send AJAX requests from your 'domain' in this manner:

var URL = 'http://myname.freewebsitespace.net/prx.php?prx_url=<any cross-domain service url>';
var fxhr = new FlashXMLHttpRequest();
fxhr.open(GET, url);

'Content-Type' should be set in the requestHeader to match the kind of data returned by cross-domain request.

The diagram below depicts the above steps pictorially and in more comprehensible manner. Click the image to view full size.

This technique is highly similar to the one - 'Use a Web Proxy for Cross-Domain XMLHttpRequest Calls' described here. However since most developers cannot setup up a proxy server on their web-host (especially when the service is free) the current workaround proves quite helpful and lets the start-up developers access the cross-domain facility at almost no cost.

The technique however has few demerits to own:

a) For first this technique requires that the browsers be flash enabled and allow instantiation of Flash based AJAX request objects. However the omnipotent nature of Flash in reality tones down the criticality of this issue.

b) Since the 'sub-domain' web-host service (except for some) usually provides a limited monthly bandwidth, web-developers cannot put this technique to use on the production scale or commercial use, where their bandwidth limit exhausts in a short interval of time rendering their web-application dead.

The resources,demonstration and the example site using the technique can be accessed from : http://jabber.org.in/JAO/JabApp.html