Cross-subdomain Requests (GET, POST, ...) with Jquery and IFrame_问答_开发者

I'm trying to develop requests between my main domain (http://foo.com) ans my API (http://api.foo.com).

To bypass the restrictions about cross-subdomain stuff, I use an Iframe, on my main page (http.//foo.com/main.html), pointing on a page iframe.html there : scripts.api.foo.com.

(scripts.api.foo.com and foo.com are on the same server, api.foo.com on anothers)

>iframe.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
       <head>
           <title>Iframe</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
           <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
       </head>
       <body>
        <script type="text/javascript">
    document.domain = 'foo.com';
    function testIframe()
    {
        $.ajax({
                    url: "http://api.foo.com/utctime",
                    timeout: 7000,
                    complete: fun开发者_开发技巧ction(jqXHR, textStatus){
                        parent.alert(jqXHR.status);}
                });
    }
        </script>
       </body>
    </html>

>main.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
       <title>Test</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   </head>
   <body>
    <script type="text/javascript">
document.domain = 'foo.com';
function test()
{
    pipeFrame.testIframe();
}
    </script>
    <iframe style="" src="http://scripts.api.foo.com/iframe.html" width="500" height="50" id="pipeFrame" name="pipeFrame"></iframe>
        <form>
           <p>
               <input type="button" value="Hop" onclick="test();" />
           </p>        
        </form>

   </body>
</html>

The alert window always contains "302" (Redirect) with Firefox 3.6/Chrome, "0" with IE8 ... Though Firebug tells me my request got a "200 Ok" status (and no response) ...

I've tried, directly on scripts.api.foo.com/iframe.html, to lauch the same request, and got the same status code.

I'm quite frustrated, after vainly searching all over the web a clear way to implement cross-subdomain, or an explanation about those status code ... Any help would be welcome.

Thanks a lots for your attention. Bye.

Unfortunately the rules for cross-domain requests also end up blocking requests that are within a subdomain even though technically it's the same server. You can either run through proxy or use a cross-domain hack to allow the $.ajax call to operate. There's a really good article on using iFrames and cross domain stuff here

http://softwareas.com/cross-domain-communication-with-iframes

If you are only targeting modern browsers (eg, IE 8), you could implement the OPTIONS request. A modern browser will, before attempting to execute a cross-site GET request, send an OPTIONS request to the target (scripts.api.foo.com) to ask if it's OK to use their scripts on the source (foo.com). The web server can then send a response which says, Sure, you can use my scripts on foo.com.

http://www.w3.org/TR/cors/

The jQuery ajax function doesn't work by default with IE's equivalent to XHR CORS called XDR for XDomainRequest... Just add that before your first ajax call and it may work in your case...

$(document).ready(function(e) {
    // CORS + XDR for Internet Explorer
    if ('XDomainRequest' in window&&window.XDomainRequest!==null)
    {jQuery.ajaxSettings.xhr=function(){try{return new XDomainRequest();}
    catch(e){}}; jQuery.support.cors = true;}
});

Just throwing it out there, but why not JSONP?

    $.ajax({
        url: "http://api.foo.com/utctime",
        type: "POST",
        dataType: "jsonp",
        jsonp: "callback",
        timeout: 7000,
    })
    .success(function (result) {
        //do something with the result
    })
    .error(function (err) {
        //do something if err;d
    });