Asynchronous cross-domain POST request via JavaScript?

Question

I could just create a form and use that to do a POST request to any site, thing is the FORM method isn't asynchronous, I need to know when the page has finished loading. I tried messing around with this using an iframe with a form inside, but no success.

Any ideas?

EDIT

unfortunately I have no control over the response data, it varies from XML, json to simple text.

Solution 1

You can capture the onload event of an iframe. Target your form to the iframe and listen for the onload. You will not be able to access the contents of the iframe though, just the event.

Try something like this:

<iframe id='RS' name='RS' src='about:blank' onload='loaded()'></iframe>

<form action='wherever.php' target='RS' method='POST'>...</form>

script block:

var loadComplete = 0
function loaded() {
    //avoid first onload
    if(loadComplete==0) {
        loadComplete=1
        return()
    }
    alert("form has loaded")
}

Solution 2

IF you want to make cross domain requests you should either made a JSON call or use a serverside proxy. A serverside proxy is easy to set up, not sure why people avoid it so much. Set up rules in it so people can not use the proxy to request other things.

Solution 3

If the data returned from the cross domain post is JSON, then you can dynamically add a script tag pointing to the URI that returns the data. The browser will load that "script" which then you can access from other javascript.

Comments

[andho]

If you have no control over the response data then wouldn't it be a security risk, because the page loaded on the iframe can access your page's DOM using window.parent.

[Luca Matteis]

I have no control over the response data.

[Luca Matteis]

Also script tag is only GET, -1 for that.

[Sampson]

Certainly the response-type isn't arbitrary. They won't send you XML once, and then the next request will be JSON. There's got to be some logic behind what determines the return-types.

[Diodeus - James MacFarlane]

Baloney. You can add a script tag to the DOM and the SRC of that script can point anywhere. Script tags do not enforce the same domain policy.

[Pim Jager]

@Diodeus: Also I said that he couldn't do anything cross-domain using javascript, what you are describing is DOM.

[Jonathan Lonowski]

@Diodeus: You can't POST a Script tag.

[Pim Jager]

Yeah that be great: I know the data that I want to use has loaded now, great. But you still can't use it.

[Luca Matteis]

Awesome, can you show an example? I dont need the data, i just need to know when the event has been fired.

[Diodeus - James MacFarlane]

Yeah, I know that, I was responding to the assertions of this answer, not the question.

[Diodeus - James MacFarlane]

I don't see anywhere in the question where the response data is required.

[Jonathan Lonowski]

@Diodeus: Ahh! Sorry. ;) Overlooked the "anything" in the answer. Not a good word to use, Pim. ;)

[Pim Jager]

@Diodus, Ok sorry, I must have read over the OP stating that (since he does)) because there also is something in the OP about content types.

[Pim Jager]

Is it an excuse that I'm no native English speaker? I'm afraid it isn't. On-topic: I really think that I might be the native speaker thing, I don't really see what is wrong with anything there? Javascript engines have SOP so cross-domain stuff can't be done using javascript?

[Luca Matteis]

Thanks Diodeus that works great apart from one little thing. The "onload" event fires 2 times, as soon as the iframe is loaded (even before submitting the form) and when you submit the iframe. Is there a way to not fire the first load?

[AnthonyWJones]

@Pim. Your statment that you "can't do anything cross-domain" is incorrect. GET requests (be they XmlHttp or Script, Img srcs) are acceptable. Its when a client attempts to POST data to a server that cross-domain becomes an issue.

[Mr. Shiny and New 安宇]

You can post anywhere you want. Just set the action attribute of the form element and you can post to any site you care about. However the resulting data will replace whatever document is loaded. If it's in an iframe the parent frame won't be able to see the response because of SOP.

[Luca Matteis]

I wanted to point out that this method only works in Firefox :(

[andho]

You are ignoring the fact that iframe method can be used to make this request.

[andho]

It should also work on webkit browsers (I checked on Google Chrome). This is similar to the method used in google maps.

[andho]

You can also read the contents of the iframe and maybe determine the datatype if needed, but I don't think it is possible to read the response headers.

[Stephen Saucier]

This worked only after I removed the () after "return".