使用Ajax从本地文件访问网络 [英] Using ajax to access web from local file

问题描述

我是一个有点新的jQuery和AJAX，所以我道歉，如果这是一个新手的问​​题。

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

我想用ajax从本地文件访问网络（例如，得到一个文本文件）。
我不使用IIS或任何东西，简单的文件从我的硬盘驱动器（我需要它保持这种方式）。
经过这两个IE8和Chrome（11.0.696.60版）。

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).

下面是一些JavaScript来说明：

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

这code正试图从网络加载一个文本文件 - 在操作失败的IE和铬（不会得到去成功的功能）
。 Chrome的通知中有关的XmlHtt prequest无法加载错误控制台的_http：//www.w3schools.com/jquery/demo_ajax_load.txt：原产地空不被访问控制允许 - 允许 - 起源的

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

这code正试图从本地文本文件加载。
即：操作成功
。 Chrome浏览器：失败，出现相同的错误如上

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

在这一点上我认为这是不可能的，从本地文件的网络进行通信，但后来我遇到了一个类似的问题：<一href="http://stackoverflow.com/questions/3595515/xmlhtt$p$pquest-error-origin-null-is-not-allowed-by-access-control-allow-origin">XmlHtt$p$pquest错误：产地空不受访问控制 - 允许 - 产地允许

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

这code在这两种浏览器的伟大工程。所以，很显然，有可能与来自本地文件的Web服务进行通信。

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

任何想法？

顺便说一句 - 我是这样用IE方面更感兴趣，Chrome等浏览器不再是一个问题。

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

感谢。

推荐答案

问题是，你正在运行到同源策略，它适用于所有的真正的Ajax调用（调用实际使用 XMLHtt prequest ）。

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

原因IE浏览器的工作原理，但Firefox和Chrome不会是简单的：IE不适用的SOP时原产地是本地文件，并且你想获取资源是在网络上。 Chrome和Firefox，在另一方面，来自W3C适用跨域资源共享标准等有有关这是我的出身，你让我跟你说话？头＆NBSP;＆mdash;和W3Schools的说：不，我不会和你说话。 （空是血统的价值为本地计算机。）为浏览器选择的喜的是，他们可以在这样的事情做出不同的设计决策。

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.

在code，你发现，工作是不是做一个真正的Ajax调用，它做 JSON-P ，不使用 XMLHtt prequest 可言，因此绕过了SOP，但仅限于 GET 操作（未 POST ）且仅当另一端支持。 （jQuery的 GET 函数都可以做真正的Ajax调用和JSON-P的关键，它在做什么是的dataType 参数，这在例如，你表现为JSONP。）

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".)

您可能会发现这篇文章有用。它描述了使用 YQL （一个HTML从雅虎刮服务）作为一种跨域代理，因为YQL支持JSON-P

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.

这篇关于使用Ajax从本地文件访问网络的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！