jquery - Using ajax to access web from local file

Question

i'm a bit new to JQuery and ajax, so i apologize if this is a newbie's question.

I'm trying to use ajax from a local file to access the web (for example, getting a text file).
I'm not using IIS or anything, simple file from my hard drive (and i need it to stay that way).
Checked it on both IE8 and Chrome (version 11.0.696.60).

Here's some javascript to illustrate:

// use ajax to load from the web
$("#webText").click(function(){
    $.get("http://www.w3schools.com/jquery/demo_ajax_load.txt", function(result){
        alert(result);
});

This code is trying to load a text file from the web - the operation fails on both IE and chrome (won't get to get to the success function).
Chrome's notifies in the error console about "XmlHttpRequest cannot load _http://www.w3schools.com/jquery/demo_ajax_load.txt: Origin null is not allowed by Access-Control-Allow-Origin"

// use ajax to load from a local file
$("#localText").click(function(){
    $.get("demo_ajax_load.txt", function(result){
        alert(result);
});

This code is trying to load from a local text file.
IE: the operation succeeds.
Chrome: fails with same error as above.

At this point i thought it was impossible to communicate with the web from a local file, but then i came across a similar question: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

Using the examples given there, I tried:

// use ajax to load json object from the web
$("#webJSON").click(function(){
    var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150';
    $.get(url, function(json) {
        alert(json.photos[1].photoUrl);
    }, "jsonp");
});

And this code works great on both browsers. So obviously, it is possible to communicate with a web service from a local file.

Any ideas?

BTW - i'm more interested with the IE aspect of this, Chrome and other browsers are less of an issue.

Thanks.

Answer 1

The problem is that you're running into the Same Origin Policy, which applies to all "real" ajax calls (calls actually using XMLHttpRequest).

The reason IE works but Firefox and Chrome don't is simple: IE doesn't apply the SOP when the origin is a local file and the resource you're trying to retrieve is on the web. Chrome and Firefox, on the other hand, apply the Cross-Origin Resource Sharing standard from the W3C and so include the relevant "this is my origin, will you let me talk to you?" headers — and w3schools is saying "No, I won't talk to you." ("null" is the "origin" value for the local machine.) The joy of having a choice of browsers is that they can make different design decisions on things like this.

The code you found that works isn't doing a real ajax call, it's doing JSON-P, which doesn't use XMLHttpRequest at all and so bypasses the SOP, but only for GET operations (not POST) and only if the other end supports it. (jQuery's get function can do both real ajax calls and JSON-P, the key to what it's doing is the dataType parameter, which in the example you showed is "jsonp".)

You may find this article useful. It describes using YQL (an HTML scraping service from Yahoo) as a cross-domain proxy, since YQL supports JSON-P.