views:

7464

answers:

8

How do I send a cross-domain POST request via JavaScript?

Notes - it shouldn't refresh the page, and I need to grab and parse the response afterward.

Your help with some code examples will be much appreciated.

+9  A: 
  1. Create an iFrame,
  2. put a form in it with Hidden inputs,
  3. set the form's action to the URL,
  4. Add iframe to document
  5. submit the form

Pseudocode

 var ifr = document.createElement('iframe');
 var frm = document.createElement('form');
 frm.setAttribute("action", "yoururl");
 frm.setAttribute("method", "post");

 // create hidden inputs, add them
 // not shown, but similar (create, setAttribute, appendChild)

 ifr.appendChild(frm);
 document.body.appendChild(ifr);
 frm.submit();

You probably want to style the iframe, to be hidden and absolutely positioned. Not sure cross site posting will be allowed by the browser, but if so, this is how to do it.

Lou Franco
+1 was going to say the same.
Robert Gould
Actually, this is slightly inaccurate, since ifr.appendChild(frm); will not work. the iframe is a reference to a window object, and the appendChild method doesn't exist for it. You'll need to grab the document node in the iframe first. This requires feature detection to work across browsers.
Rakesh Pai
Thanks. Found these useful links regarding the matter: http://bindzus.wordpress.com/2007/12/24/adding-dynamic-contents-to-iframes/ http://developer.apple.com/internet/webcontent/iframe.html
Ido Schacham
Problem! The received response in the iframe lies at a different domain, so the main window has no access to it, neither does the iframe have access to the main window.So this solution only seems good for doing the POST, but you can't parse the response afterward :(
Ido Schacham
Try setting an onload in the body tag of the response to a JavaScript function that calls a function in the parent with the response string.
Lou Franco
+1  A: 

How would you read the response afterwards?

You're right, you just can't!
Ido Schacham
A: 

High level.... You need to have a cname setup on your server so that other-serve.your-server.com points to other-server.com.

Your page dynamically creates an invisible iframe, which acts as your transport to other-server.com. You then have to communicate via JS from your page to the other-server.com and have call backs that return the data back to your page.

Possible but requires coordination from your-server.com and other-server.com

+2  A: 

Check the post_method function in http://taiyolab.com/mbtweet/scripts/twitterapi_call.js - a good example for the iframe method described above.

ndn
+2  A: 
  1. Create two hidden iframes (add "display: none;" to the css style). Make your second iframe point to something on your own domain.

  2. Create a hidden form, set its method to "post" with target = your first iframe, and optionally set enctype to "multipart/form-data" (I'm thinking you want to do POST because you want to send multipart data like pictures?)

  3. When ready, make the form submit() the POST.

  4. If you can get the other domain to return javascript that will do Cross-Domain Communication With Iframes (http://softwareas.com/cross-domain-communication-with-iframes) then you are in luck, and you can capture the response as well.

Of course, if you want to use your server as a proxy, you can avoid all this. Simply submit the form to your own server, which will proxy the request to the other server (assuming the other server isn't set up to notice IP discrepancies), get the response, and return whatever you like.

Magarshak
A: 

Hi,

Is there any specific reason you want to do form-posting.

The other way round is to write web service as provider for accepting your request and return response. And then use javascript httpwebrequest to send request and get response.

I think this would be better way to avoid page refresh and catching response.

Hope this helps you.

Gagan Deep Gupta
XMLHttpRequest is not able to go cross-domain in IE7. Newer browsers support Cross-Origin Resource Sharing (CORS).
Ivo Danihelka
A: 

Should be possible with a YQL custom table + JS XHR, take a look at: http://developer.yahoo.com/yql/guide/index.html

I use it to do some client side (js) html scraping, works fine (I have a full audio player, with search on internet/playlists/lyrics/last fm informations, all client js + YQL)

Guillaume86
A: 

This is an old question, but some new technology might help someone out.

If you have administrative access to the other server then you can use the opensource Forge project to accomplish your cross-domain POST. Forge provides a cross-domain JavaScript XmlHttpRequest wrapper that takes advantage of Flash's raw socket API. The POST can even be done over TLS.

The reason you need administrative access to the server you are POSTing to is because you must provide a cross-domain policy that permits access from your domain.

http://github.com/digitalbazaar/forge

dlongley