Retrieving response from remote server after uploading a file in iframe

Question

I have a form that uploads a file in an firame to a remote server. As a result at the submission url server returns json data with the result of operation, which my iframe catches.

{'result': 'true' or 'false'}

Now I'd like to retrieve this json as the callback of my iframe. I know that I need jsonp to achieve this since it's a cross-site call. Here's my function with sample code from IBM' site :

function fileUploadFunction(){     
    var fileUploadForm = $('#file_upload_form');
    fileUploadForm.attr('action', uploadURL);
    fileUploadForm.submit();
    $('#upload_target').load(function () {
        alert("IFrame loaded");
            $.getJSON(uploadUrl+"&callback=?", function(data) {
                alert("Symbol: " + data.symbol + ", Price: " + data.price);
            });
    });         
};

But here few problems arise. First - my uploadUrl is just "http://something/" . Do I need it to support calls with $callback= suffix ?
Secondly - server gives response only as a result to file upload. So I need to get the result that is stored in my iframe and not at the specified url. How to solve this ?

Here's the link. Notice hidden iframe inside the form. Result from server shows there. :

http://ntt.vipserv.org/artifact/

---

EDIT

I've previously tried :

    $('#upload_target').load(function () {
        var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
        var data = eval("("+ret+")");
    });

But it raises 'permissions denied' error.

Answer 1

This is easily done with easyXDM and there is actually a blog post about this exact use case here.

In essence what it does is use cross-domain messaging to relay the response to the invoking document.

Update: Here is a link for this in action, the source can be found at github, the files are prefixed 'upload_'.