Can't get jQuery ajax method to work

Question

I have 2 html files named host.html and test.html I have tried so hard but I can't get to load test.html file as the content of mydiv in host.html I have tried:

$("#myDiv").load("test.html");

but it fails; then I tried using the following ajax method to get the file:

$.ajax({
  type: "GET",
  url: "test.html",
  error: function (xhr, statusText) { alert("Error: " + statusText); },
  success: function (msg) { alert("Success: " + msg); }
});

But sadly I am always hitting the error ! Both host.html and test.html are on in the same folders! What am I doing wrong?! Please help

Cheers!

Answer 1

Quoting this: Origin null is not allowed by Access-Control-Allow-Origin

Origin null is the local file system, so that suggests that you're loading the HTML page that does the load call via a file:/// URL (e.g., just double-clicking it in a local file browser or similar). Different browsers take different approaches to applying the Same Origin Policy to local files.

My guess is that you're seeing this using Chrome. Chrome's rules for applying the SOP to local files are very tight, it disallows even loading files from the same directory as the document. So does Opera. Some other browsers, such as Firefox, allow limited access to local files. But basically, using ajax with local resources isn't going to work cross-browser.

If you're just testing something locally that you'll really be deploying to the web, rather than use local files, install a simple web server and test via http:// URLs instead. That gives you a much more accurate security picture.