使用ajax从本地文件访问网页

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

此代码正在尝试从 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：失败并出现与上述相同的错误。

此时我认为无法从本地文件与网络通信，但后来我遇到了类似的问题：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 应用了 W3C 的Cross-Origin Resource Sharing 标准，因此包括相关的“这是我的出身，你可以让我和你谈谈吗？”标题 - w3schools 说“不，我不会和你说话”。 （“null”是本地机器的“origin”值。）选择浏览器的乐趣在于它们可以对这样的事情做出不同的设计决策。

您发现有效的代码不是在执行真正的 ajax 调用，而是在执行 JSON-P，它根本不使用 XMLHttpRequest，因此绕过了 SOP，但仅适用于 GET 操作（不是 @ 987654329@) 并且只有在另一端支持它的情况下。 （jQuery 的 get 函数可以进行真正的 ajax 调用和 JSON-P，其作用的关键是 dataType 参数，在您展示的示例中是“jsonp”。）

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