I am maintaining a website that uses Javascript. The script uses jQuery and loads some content from the server at which the site is normally hosted.

Just for convenience while maintaining the site, I run a local copy of the site on my iMac. This works perfectly fine when I use Safari. But Firefox, Opera and Chrome refuse to work. I guess it is because of cross-domain-policy. (I couldn't test this with IE, because IE has to run in a virtual machine on my iMac, so for this reason it is not possible to access any local files)

Is there a setting within Firefox and the other browsers where I can tell the browser that it is ok to ajax-load files that are located on a remote server from a local html-page with a local javascript?

In a nutshell: This my html-page:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;some title&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="../css/stylesheet.css"&gt;
        &lt;script src="../js/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
        &lt;script src="../js/myScript.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- some content with a div-container to receive the ajax-content --&gt;
    &lt;/body&gt;
&lt;/html&gt;


This is myScript.js:

var errorMsg = function (msg) {
    //insert the message into the html-page
};

var JSONerror = function (jqXHR, textStatus, errorThrown ) {
    var msg = 'JSON-answer: '+jqXHR.responseText;
    msg += '&lt;br&gt;'+'JSON-Errorstatus: '+textStatus;
    if ($.type(errorThrown) === 'string') {
        msg += '&lt;br&gt;'+'Error: '+errorThrown;
    }
    errorMsg(msg);
};

var JSONreceive = function (JSONobj, StatusString, jqXHR) {
    //insert the data in JSONobj into the html-page
}

var StartAJAX = function () {
    $.ajax({
        url: 'http://my.domain.tld/cgi-bin/myPerlScript.pl',
        data: "lastID=" + lastID
           + '&amp;qkz=' + Math.random(),
           dataType: "json",
           success: JSONreceive,
           error: JSONerror
    });
};


There is also an event-listener, that listens for page-scroll and resize and checks some other constraints (like: is there already an ajax-call in progress?). This listener calls StartAJAX.

When it calls StartAJAX on a local copy of my page (file:///User/...) within Safari, I get the Ajax-content perfectly fine inserted into my html-document. within the other browsers i get the error-message inserted into the html-page. It is:


  JSON-Answer: undefined
  JSON-Errorstatus: error
  Error:


Why does it work in Safari but not in Firefox, Chrome and Opera?  

How can I make those browsers work?

(I need to test it with all browsers, because all browsers render the same html-domument differently, but I don't want to upload all files to the server after every change just to test it.)

EDIT:

After reading some answers, I want to make something clear, that I obviously did not make clear enough:

I am searching for settings in Webbrowsers


I will NOT change the settings of my remote webserver (Apache)
I will NOT manipulate any files on my remote machine (.htaccess)
I will NOT set up a webserver on my local iMac
I will NOT change the code of the AJAX-calls in my Javascript-files
I will NOT change the code of the Perl-Scripts on my remote Server


I can tell you why:

I am just doing a short maintainance, and i am too lazy to upload every manipulated file to the remote machine after I edited it. The settings of the webserver are fine for actual operation. I don't want to change them (and maybe forget the changes before finishing my work). Same for the scripts: Those parts that some of you want to change work fine as they are now. There is no reason to touch the Ajax-Calls, because there is nothing wrong with them in the productive environment.

All I want is that those stupid browsers Firefox, Opera and Chrome behave like Safari and process the Ajax-calls correctly.

BTW:

Please can anyone explain what is so risky to call data via Ajax from an other domain in Firefox, Opera or Chrome while it seems to be harmless doing the same thing in Safari?


Question: How can I make my iPad apps retina in Xcode 5 iOS7
Answer: No we don't need two storyboards for this. In storyboard, the view size will be 1024 x 768. You have to design the views for same sizes and keep images for these sizes only. Example, if you are making an UIImageView of size 100 x 100, then you will need to set its image of size 100 x 100 only. Now the extra effort required is:
If you named that image as test.png of size 100 x 100, then you have to add same image with name test@2x.png and size 200 x 200 to your project folder.

Now when the application will run on non retina divice, then it will by default take test.png and when the app will run on retina device, then test@2x.png will be used. This is default property you don't need to set this any where in code.

So make your views as usual and just keep images with @2x.png in project folder. Rest things will be managed automatically.