2014-03-05 47 views
1

我試圖從API文件中拖出前15個字出現問題。使用We feel fine API試圖拉xml/json

XMLHttpRequest cannot load

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

林:我曾經嘗試都爲XML和JSON,仍然似乎得到這個錯誤。

這裏是我的代碼:

<script type="text/javascript"> 
(function() { 
    var WeFeelAPI = "http://api.wefeelfine.org:8080/ShowFeelings?display=json&returnfields=feeling,conditions&limit=15"; 

    $.getJSON(WeFeelAPI,function (json){ 
    var feel = json.results[15]; 
    console.log('Our feelings : ', feel); 
    }); 

})(); 
</script> 

任何幫助,將不勝感激,我很新的這一切,得益於

+0

我不認爲它是正確的API感覺..有時它真的需要專注於獲得API的感受.. –

+0

看起來他們不支持遠程JavaScript API ...或JSON響應(他們有純文本或XML只)根據此頁 - http://www.wefeelfine.org/api.html – Phil

+0

嗯,我認爲我會奮鬥的任何意見,如何處理它? –

回答

0

這裏是你可以運行沿側你的頁面與一個簡單的PHP代理JavaScript的

<?php 
// Saved as ShowFeelings-proxy.php 

$options = array_merge($_GET, ['display' => 'xml']); 
// if you don't have PHP 5.4+, you need to use the legacy array literal syntax, eg 
// array('display' => 'xml') 

$uri = 'http://api.wefeelfine.org:8080/ShowFeelings?' . http_build_query($options); 

$xml = simplexml_load_file($uri); 

// assuming you'd rather work with JSON (I know I would) 
$data = []; 
foreach ($xml->feeling as $feeling) { 
    $entry = []; 
    foreach ($feeling->attributes() as $attr => $val) { 
     $entry[$attr] = (string) $val; 
    } 
    $data[] = (object) $entry; 
} 

header('Content-type: application/json'); 
echo json_encode($data); 
exit; 

然後,在JavaScript ...

+function($) { 
    var url = 'ShowFeelings-proxy.php', 
     options = { 
      'returnfields': 'feeling,conditions', 
      'limit': 15 
     }; 
    $.getJSON(url, options, function(data) { 
     var feeling = data[14]; // array is zero-based 
     console.log(feeling); 
    }); 
}(jQuery); 
+0

感謝這個似乎很好的工作 –

+0

這是偉大的,它工作完美,現在我已經從這裏學到了更多。感謝代碼,它非常感謝:) –

+0

對不起,他們都工作完美,所以我給那些更需要它的人打勾。 –

1

閱讀我們感覺良好的API,它似乎並不像他們支持JSONP,甚至從我所能看到的JSON。

阻止您調用它的問題稱爲「相同原點策略」。它防止域名因其安全問題而向另一域發出非法請求。您可以在此處閱讀:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

JSONP(帶填充的JSON)是一種網站通過將響應加載到外部腳本然後觸發回調函數來驗證響應內容的方法。這實際上提供了有關SOP和JSONP的良好信息:http://www.codeproject.com/Articles/42641/JSON-to-JSONP-Bypass-Same-Origin-Policy

不幸的是,您使用的API並不支持JSONP,因此需要使用代理方法。有一個聰明的/有創意的/可能使用稱爲雅虎查詢語言(YQL)的黑客(觀點)方法。 YQL允許您通過使用Yahoo的查詢服務作爲「代理」來執行x域請求。你傳遞一個類似於SQL的查詢的請求,並且Yahoo處理JSONP方法。你可以在這裏閱讀:http://developer.yahoo.com/yql/(對不起所有的閱讀。)

現在有些代碼來演示這一點。注意查詢被用來檢索XML和事實,即它必須被編碼爲URI使用:

(function() { 
    var url = 'http://api.wefeelfine.org:8080/ShowFeelings?display=xml&returnfields=feeling,conditions&limit=15' 
    // using yahoo query 
    var query = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + url + '"') + 
    '&format=json&callback=?'; 

    // make request via YQL and show data 
    $.getJSON(query, function(data) { 
     console.log(data); 
     // yql returns "results" in "query" from data 
     console.log(data.query.results); 
    }); 
})(); 

播放與小提琴:http://jsfiddle.net/Ty3y2/

同樣的方法其實可以用來加載HTML和實際上可能用於更多。關鍵是「select * from xml where ...」,它告訴它選擇在請求的URL處找到的XML元素內的所有內容。請記住,XML數據在根上有一個XML元素。大多數情況下,您會將其看作「select * from html where ...」,因爲典型的Web請求會返回HTML,它是根元素的HTML元素。

我已經將這種方法用於幾個項目,儘管我的大部分應用程序都是通過PHP或C#使用代理。不過,我在這方面取得了很好的成功,當您不想/需要爲其組裝代理時,該功能很有用。

+0

Thankyou,這是一個偉大的工作,非常好,似乎工作得很好:) –