2011-05-09 59 views
10

我對JQuery和AJAX有點新,所以我很抱歉如果這是一個新手的問​​題。使用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的錯誤控制檯通知有關「的XmlHttpRequest無法加載 _http://www.w3schools.com/jquery/demo_ajax_load.txt:產地空不允許通過訪問控制允許來源」

// 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瀏覽器和其他瀏覽器都不是什麼問題。

謝謝。

+1

我很困惑 - 你剛剛回答你自己的問題嗎? :-) – Nathan 2011-05-09 07:33:13

+0

不,我的意思是 - 如果某些請求可能(如jsonp),其他請求(如簡單的文本文件)也可以這樣嗎? – 2011-05-09 09:26:22

回答

15

問題是你運行到Same Origin Policy,它適用於所有「真正的」阿賈克斯調用(實際上使用XMLHttpRequest調用)。

原因IE的作品,但Firefox和Chrome不會很簡單:當起源是一個本地文件,你想獲取資源在網絡上的IE不適用的SOP。 Chrome和Firefox,而另一方面,來自W3C應用Cross-Origin Resource Sharing標準,因此包括相關的「這是我的出身,你讓我跟你說話?」標題  —和w3schools在說「不,我不會和你說話。」 (「空」是本地計算機的「原點」值。),具有瀏覽器的選擇喜的是他們可以像這樣的事情做出不同的設計決策。

你發現工作是不是做一個真正的Ajax調用,它做JSON-P,這完全不使用XMLHttpRequest等繞過SOP,但僅限於GET操作(不POST)且僅當該代碼另一端支持它。 (jQuery的get功能都可以做真正的Ajax調用和JSON-P的關鍵,它在做什麼是dataType參數,在這個例子中,你表現出這是「JSONP」。)

您可能會發現this article有用。它描述了使用YQL(來自Yahoo的HTML抓取服務)作爲跨域代理,因爲YQL支持JSON-P。

+0

YQL有訣竅。感謝您的解釋! – 2011-05-09 11:19:30

+0

@Omri:不客氣!我很高興這有幫助。 (我已經向至少4-5人指出了YQL的事情;你是第一個報告他們已經使用過它的人。很酷。) – 2011-05-09 12:06:49

+1

你做了我的一天。非常感謝您的解釋。 – AppMobiGurmeet 2012-12-18 11:34:34