如何在JavaScript中使用簡單的REST API

如何從JavaScript中使用REST API獲取數據。我有幾個基本的API，我想從不需要任何身份驗證的數據。所有的API都以JSON的形式返回我想要的數據。例如https://www.codewars.com/api/v1/users/MrAutoIt。我認爲這將是一個非常簡單的過程使用xmlhttprequest，但它似乎same-origin policy給我的問題。如何在JavaScript中使用簡單的REST API

我已經嘗試了以下幾個教程，但他們似乎沒有在跨域上工作，或者我不明白他們。我試圖張貼鏈接到教程，但我還沒有足夠高的聲譽。

來源

2015-11-11 MrAutoIt

你應該張貼的示例代碼爲你嘗試過什麼。你的問題太開放和含糊。 – Prefix

假設你不控制API的服務器，並且他們不允許CORS，你真的不能做太多事情。儘管極端，但有一種可能性是爲該API設置反向代理服務器。（[這個答案可以幫助。]（http://stackoverflow.com/questions/19821753/jquery-xml-error-no-access-control-allow-origin-header-is-present-on-the-req/19821851 ＃19821851）） – acdcjunior

你怎麼知道他們是否允許CORS？我可以在CORS上找到的唯一好網站是：http://www.html5rocks.com/en/tutorials/cors。我無法找到關於如何確定網站是否允許CORS的任何信息。 – MrAutoIt

如果您嘗試訪問與發出請求的網頁不在同一個主機：端口上的Web服務，您將遇到相同的源策略。有幾件事你可以做，但所有這些都需要服務的所有者爲你做事。

1）由於相同的原始策略不影響腳本，因此請允許服務以JSONP而不是JSON響應;或

2）發送Access-Control-Allow-Origin頭在授予您的網頁訪問

如果你不能得到服務所有者向您授予權限，你可以請求服務器端（Web服務響應例如來自Node.js的或PHP或Rails代碼）從是在您的控制下，然後將數據轉發到您的網頁。但是，根據Web服務的服務條款，您可能會遭到違反，並且您可能會冒他們禁止您的服務器的風險。

來源

2015-11-11 01:28:34 Amadan

-1

以下是您如何獲取數據。

var request = new XMLHttpRequest(); 
request.open('GET', 'https://www.codewars.com/api/v1/users/MrAutoIt', true); 

request.onload = function() { 
    if (this.status >= 200 && this.status < 400) { 
    var resp = this.response; // Success! this is your data. 
    } else { 
    // We reached our target server, but it returned an error 

    } 
}; 

request.onerror = function() { 
    // There was a connection error of some sort 
}; 

request.send();

至於運行到同一產地的政策......你應該從你控制原點請求，或者你可以嘗試停用Chrome的Web安全，或安裝擴展名，例如Allow-Control-Allow-Origin *迫使頭。

來源

2015-11-11 01:28:52 Prefix

如果你嘗試了這個代碼，你會知道它確實存在OP詢問的問題。（「同源策略給我帶來了問題」） – Amadan

問題是'你如何在JavaScript中使用簡單的REST API'。但我也增加了有關克服同源政策問題的信息。 – Prefix

如果他在同源政策方面有問題，他*顯然知道*如何提出請求。而且您發佈的反政策信息僅用於調試和學習目的，並且在正常的Web開發中完全並且完全無法使用，因爲您需要請求網頁的每個用戶放棄其安全性以適應您的頁面。這就像廣告一個清潔服務一樣，「一塵不染的廚房，100％的滿意保證，我們要求你在你的外牆上打一個洞，讓我們的工人可以進入」，而不是向房主索要鑰匙。 – Amadan

-1

因爲你可能有這樣的事情get方法：

@section scripts{ 
<script type="text/javascript"> 
$(function() 
{ 
     $.getJSON('/api/contact', function(contactsJsonPayload) 
     { 
      $(contactsJsonPayload).each(function(i, item) 
      { 
       $('#contacts').append('<li>' + item.Name + '</li>'); 
      }); 
     }); 
}); 
</script> 
}

在這種tutorial檢查主題：練習3：從HTML客戶端使用Web API

來源

2015-11-11 01:40:20 1cgmr

事實上，取決於您的服務器REST API支持的JSONP或CORS。您還需要了解CORS是如何工作的，因爲有兩種不同的情況：

簡單的請求。我們在這種情況下，如果我們使用HTTP方法GET，HEAD和POST。在POST方法的情況下，僅支持具有以下值的內容類型：text/plain,application/x-www-form-urlencoded,multipart/form-data。
預照明請求。如果不是簡單請求，則會執行第一個請求（使用HTTP方法OPTIONS）來檢查在跨域請求的上下文中可以做什麼。

這就是說，你需要添加的東西到你的AJAX請求，使服務器端CORS支持。我想像的標題有Origin,Access-Control-Request-Headers和Access-Control-Request-Method。

大多數JS庫/框架像Angular都支持這種方法。

使用jQuery（請參閱http://api.jquery.com/jquery.ajax/）。通過crossDomain和xhrFields>withCredentials，在此級別上有一些可能的配置。

隨着角（見How to enable CORS in AngularJs）：

angular 
    .module('mapManagerApp', [ (...) ] 

    .config(['$httpProvider', function($httpProvider) { 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 
    });

如果你想使用低級別的JS API的AJAX，你需要考慮幾件事情：

在Firefox 3.5+，Safari 4+中使用XMLHttpRequest Chrome和在IE8中使用XDomainRequest對象+
使用xhr.withCredentials到true，如果你想使用AJAX和CORS的憑證。

這裏有一些鏈接，可以幫助你：

瞭解和使用CORS：https://templth.wordpress.com/2014/11/12/understanding-and-using-cors/
4 jQuery的跨域Ajax請求方法：http://jquery-howto.blogspot.fr/2013/09/jquery-cross-domain-ajax-request.html#cors（見「1 CORS（跨源資源共享）「）
釋放你的AJAX請求與CORS：http://dev.housetrip.com/2014/04/17/unleash-your-ajax-requests-with-cors/
使用CORS跨域AJAX請求：http://techblog.constantcontact.com/software-development/using-cors-for-cross-domain-ajax-requests/
跨源資源共享CORS jQuery和Node.js的之間的AJAX請求：http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm

跳上它可以幫助你，蒂埃裏

來源

2015-11-16 10:01:26

如何在JavaScript中使用簡單的REST API

回答

相關問題