使用ajax从本地文件访问Web

Question

我对JQuery和ajax有点新鲜,所以如果这是一个新手的问​​题,我道歉.

我正在尝试使用本地文件中的ajax来访问Web(例如,获取文本文件).
我没有使用IIS或任何东西,我的硬盘上的简单文件(我需要它保持这种方式).
在IE8和Chrome上进行了检查(版本11.0.696.60).

这里有一些javascript来说明:

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

此代码试图从Web加载文本文件 - 操作在IE和chrome上都失败(无法获得成功功能).
Chrome在错误控制台中通知"XmlHttpRequest无法加载 _http://www.w3schools.com/jquery/demo_ajax_load.txt:Access-Control-Allow-Origin不允许使用Origin null"

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

此代码尝试从本地文本文件加载.
IE:操作成功.
Chrome:失败并出现与上述相同的错误.

此时我认为无法从本地文件与Web通信,但后来我遇到了类似的问题:XmlHttpRequest错误:Access-Control-Allow-Origin不允许使用null

使用那里给出的例子,我试过:

// 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");
});

这段代码适用于两种浏览器.显然,可以从本地文件与Web服务进行通信.

有任何想法吗？

顺便说一句 - 我对IE的这方面更感兴趣,Chrome和其他浏览器不是一个问题.

谢谢.

Answer 1

问题是你正在遇到同源策略,它适用于所有"真正的"ajax调用(实际使用的调用XMLHttpRequest).

IE工作原因但Firefox和Chrome不简单:当原始文件是本地文件并且您尝试检索的资源在网络上时,IE不应用SOP.另一方面,Chrome和Firefox应用W3C 的跨源资源共享标准,因此包括相关的"这是我的起源,你能告诉我你吗？" 标题 - 和w3schools说"不,我不会跟你说话." ("null"是本地机器的"原点"值.)选择浏览器的乐趣在于它们可以对这样的事情做出不同的设计决策.

你找到的代码没有进行真正的ajax调用,它正在执行JSON-P,它根本不使用XMLHttpRequest,因此绕过SOP,但只针对GET操作(不是POST),只有当另一端支持它时.(jQuery的get函数可以同时执行真正的ajax调用和JSON-P,它正在做的事情的关键是dataType参数,在你演示的例子中是"jsonp".)

您可能会发现本文很有用.它描述了使用YQL(来自Yahoo的HTML抓取服务)作为跨域代理,因为YQL支持JSON-P.