A question about cross-domain (subdomain) ajax request

Let's say I have the main page loaded from http://www.example.com/index.html. On that page there is js code that makes an ajax request to http://n1.example.com//echo?message=hello. When the response is received a div on the main page is updated with the response body.

Will that work on all popular browsers?

Edit:

The obvious solution is to put a proxy in front of www.example.com and n1.example.com and set it so that every request going to a subresource of http://www.example.com/n1 gets proxied to http://n1.example.com/.

Cross domain is entirely a different subject. But cross sub-domain is relatively easy. All you need to do is to set the document.domain to be same in both the parent page and the iframe page.

document.domain = "yourdomain.com"

More info here

Note: this technique will only let you interact with iframes from parents of your domain. It does not alter the Origin sent by XMLHttpRequest.

All modern browsers support CORS and henceforth we should leverage this addition.

It works on simple handshaking technique were the 2 domains communicating trust each other by way of HTTP headers sent/received. This was long awaited as same origin policy was necessary to avoid XSS and other malicious attempts.

To initiate a cross-origin request, a browser sends the request with an Origin HTTP header. The value of this header is the site that served the page. For example, suppose a page on http://www.example-social-network.com attempts to access a user's data in online-personal-calendar.com. If the user's browser implements CORS, the following request header would be sent:

Origin: http://www.example-social-network.com

If online-personal-calendar.com allows the request, it sends an Access-Control-Allow-Origin header in its response. The value of the header indicates what origin sites are allowed. For example, a response to the previous request would contain the following:

Access-Control-Allow-Origin: http://www.example-social-network.com

If the server does not allow the cross-origin request, the browser will deliver an error to example-social-network.com page instead of the online-personal-calendar.com response.

To allow access to all pages, a server can send the following response header:

Access-Control-Allow-Origin: *

However, this might not be appropriate for situations in which security is a concern.

Very well explained here in below wiki page. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Another solution that may or may not work for you is to dynamically insert/remove script tags in your DOM that point to the target domain. This will work if the target returns json and supports a callback.

Function to handle the result:

<script type="text/javascript">
  function foo(result) {
    alert( result );
  }
</script>

Instead of doing an AJAX request you would dynamically insert something like this:

<script type="text/javascript" src="http://n1.example.com/echo?callback=foo"></script>

Another workaround, is to direct the ajax request to a php (for example) page on your domain, and in that page make a cURL request to the subdomain.

The simplest solution I found was to create a php on your subdomain and include your original function file within it using a full path.

Example: > www.domain.com/ajax/this_is_where_the_php_is_called.php

Subdomain: > sub.domain.com

Create: sub.domain.com/I_need_the_function.php > Inside I_need_the_function.php just use an include:

> include_once("/server/path/public_html/ajax/this_is_where_the_php_is_called.php");

Now call sub.domain.com/I_need_the_function.php from your javascript.

var sub="";
switch(window.location.hostname)
{
case "www.domain.com":
sub = "/ajax/this_is_where_the_php_is_called.php";
break;
case "domain.com":
sub = "";
break;
default: ///your subdomain (or add more "case" 's)
sub = "/I_need_the_function.php";
}

   
xmlHttp.open("GET",sub,true);

The example is as simple as I can make it. You may want to use better formatted paths.

I hope this helps some one. Nothing messy here - and you are calling the original file, so any edits will apply to all functions.

New idea: if you want cross subdomain (www.domain.com and sub.domain.com) and you are working on apache. things can get a lot easier. if a subdomain actually is a subdirectory in public_html (sub.domain.com = www.domain.com/sub/. so if you have ajax.domain.com/?request=subject...you can do something like this: www.domain.com/ajax/?request=subject

works like a charm for me, and no stupid hacks, proxies or difficult things to do for just a few Ajax requests!

I wrote a solution for cross sub domain and its been working for my applications. I used iframe and setting document.domain="domain.com" on both sides. You can find my solution at :

https://github.com/emphaticsunshine/Cross-sub-domain-solution