The client (browser) can make calls to a different domain then what it currently resides on but this does not necessarily mean that the requested server will accept the request(s). With slight modification on the server this communication can be achieved. For this example I will use PHP as an example but the implementation concept holds true irrespective to the server side technologies being used.

Key Concepts

You should be aware of some of the key concepts when looking into or implementing your ajax cross browser functionalities.

1. As indicated above, the browser by default allows you to make ajax calls on your own server but does not allow you to make ajax cross browser calls outside of your domain/server.

2. Chrome, Firefox, Safari uses XMLHttpRequest (XHR) to execute ajax calls. Internet Explorer (versions lower then 10) uses Cross Domain Request (XDR) to execute ajax calls. I found trying to perform “posts” via XDR does not work so use it for “get”.

3. JQuery uses XMLHttpRequest (XHR) to make ajax calls, “$.ajax()”. So this will pose as an issue when your JQuery code executes on IE. Fortunately there are JQuery plugins that you can link to your html document so resolve this issue. I have successfully used this plugin with “$.ajax()” to resolve the IE issue.

4. The server side needs to be aware that it will accept cross domain calls. Add the following lines of code to achieve this.

header('Access-Control-Allow-Origin:'.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

Avoid using:

Access-Control-Allow-Origin:*

You only want valid calls coming to your server.