Why is $.post() subject to same-origin policy, but submitting a form with method='POST' okay?

Question

I'm working on a web-based tool which streamlines the work we do at my office. The tools provided to us by our partner have a generic login that our entire floor uses, but it times out every 30 minutes, which is annoying to have to log-into again all day.

What I had done in the past, was create a hidden iframe inside my tool which logs into it by submitting a hidden form on page load, and continuing to submit the form every 30 minutes to prevent a timeout. They can then submit searches to the partner tool directly from my tool (via another, visible form).

I'd like to use jQuery $.post() to both get rid of the hidden iframe, and make it so the only time it submits the login info is when a search is being done. That way it's not constantly sending requests when not in use, but you can still run a search without having to worry about the login timing out.

It would seem the ajax same origin policy is preventing this, so at the moment I'm just having it open a new named window, and then submitting two hidden forms in the target window one after the other.

The problem with this is if the login request hasn't finished, the search request doesn't go through, and they're brought to the login page again. If they close the window and search again it will work, but this is also annoying, just not as much as the original situation.

So other than the fact that you actually have to see the page open up (unless it's in a hidden iframe) what is the difference between submitting parameters via $.post() and submitting a form using the POST method? They look identical in firebug. Is there any way I can set up a callback on the form submission, so it waits for the first request to complete before starting the second?

Answer 1

$.post uses xmlhttprequest to send data. Xhr is restricted under the same-origin policy. Sending a straight up HTTP POST request is not.