jquery - 使用ajax从本地文件访问web

Question

我对 JQuery 和 ajax 有点陌生，所以如果这是新手的问题，我深表歉意。

我正在尝试使用本地文件中的 ajax 来访问网络(例如，获取文本文件)。
我没有使用 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);
});

此代码尝试从网络加载文本文件 - 该操作在 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:失败并出现与上面相同的错误。

此时我认为不可能从本地文件与网络进行通信，但后来我遇到了类似的问题:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

使用那里给出的示例，我尝试过:

// 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

问题是您遇到了 Same Origin Policy ，它适用于所有“真正的”ajax 调用(实际使用 XMLHttpRequest 的调用)。

IE 可以工作但 Firefox 和 Chrome 不能工作的原因很简单:当源是本地文件并且您尝试检索的资源位于网络上时，IE 不会应用 SOP。另一方面，Chrome 和 Firefox 应用 Cross-Origin Resource Sharing来自 W3C 的标准，因此包括相关的“这是我的起源，你能让我和你说话吗？”标题 - w3schools 说“不，我不会和你说话。” (“null”是本地计算机的“origin”值。)选择浏览器的乐趣在于，它们可以对此类事情做出不同的设计决策。

您发现有效的代码并不是执行真正的 ajax 调用，而是执行 JSON-P ，它根本不使用 XMLHttpRequest ，因此绕过了 SOP，但仅适用于 GET 操作(而不是 POST)，并且仅当其他操作结束支持它。 (jQuery 的 get 函数既可以执行真正的 ajax 调用，也可以执行 JSON-P，其作用的关键是 dataType 参数，在您展示的示例中是“jsonp” .)

您可能会找到this article有用。它描述了使用 YQL (来自 Yahoo 的 HTML 抓取服务)作为跨域代理，因为 YQL 支持 JSON-P。