使用jQuery從子域獲取JSON

我有user1.mydomain.com和user2.mydomain.com域。我使用api.mydomain.com通過AJAX/JSON處理我的Web應用程序。所以，我想使用jQuery來做一個如下的user1.mydomain.com到api.mydomain.com/projects的POST請求：{'action':'getActiveProjects'}在JSON中獲取用戶1的活動項目列表。我發現$.getJSON方法，但似乎沒有選擇發送一些數據到服務器，只是GET方法。我面臨的另一個問題是同一起源政策。那麼，如何將一些JSON POST到另一個子域中的服務器並獲得JSON響應呢？使用jQuery從子域獲取JSON

來源

2011-02-24 Sergei Basharov

使用$.ajax和JSON-P通過指定dataType: "jsonp"。鏈接文檔中的詳細信息。您的服務器將不得不使用JSON-P而不僅僅是JSON來響應，但如果您控制服務器，這很容易實現。或者，如果您只需要支持相當新的瀏覽器（而不是IE），則可以將服務器設置爲支持CORS。但是這隻在最近的瀏覽器中被支持，雖然IE8支持它，但它不支持透明地通過通常的XMLHttpRequest對象，而是需要一個完全不同的傳輸對象（XDomainRequest），jQuery不會自動爲你處理）。

下面是使用jQuery一個JSON-P例如：

$.ajax({ 
    // The source URL 
    url: "http://jsbin.com/ubucu4", 

    // Tell jQuery you're doing JSON-P 
    dataType: "jsonp", 

    // Include some data with the request if you like; 
    // this example doesn't actually *use* the data 
    data: {some: "data"}, 

    // You can control the name of the callback, but 
    // usually you don't want to and jQuery will handle 
    // it for you. I have to here because I'm doing this 
    // example on JSBin. 
    jsonpCallback: "exampleCallback", 

    // Success callback 
    success: function(data) { 
    display("Received data, typeof data = " + typeof data); 
    display("data.foo = " + data.foo); 
    display("data.bar = " + data.bar); 
    }, 

    // Error callback  
    error: function(jxhr, status, err) { 
    display("Error, status = " + status + ", err = " + err); 
    } 
});

Live copy

在服務器上，你會看到jQuery的又增加了一個callback參數的URL，例如在上面這將是http://jsbin.com/ubucu4?callback=exampleCallback但如果你喜歡jQuery控制它的名字會有點異國情調。您的服務器端代碼應該構造一個JavaScript函數調用的響應，並調用該函數。我在上面的例子中的響應爲：

exampleCallback({ 
    "foo": "This is foo", 
    "bar": "This is bar" 
});

這一切發生因代替使用XMLHttpRequest，這是受到Same Origin Policy，JSON-P使用動態添加script標籤（其是精細）。在我的例子中，標籤看起來像

<script type='text/javascript' src='http://jsbin.com/ubucu4?callback=exampleCallback'></script>

瀏覽器將檢索腳本，這是您的JSON-P響應，並執行它。這意味着回調被調用，並且您的數據被提供給您的腳本。

您的JSON-P響應在技術上不是JSON;它是JavaScript，因此你必須在你信任的服務器上使用JSON-P（比如你自己的子域服務器），因爲你直接在頁面中注入代碼。否則，如果您使用的是某個您無法信任的服務器，則注入的代碼可能會很好地讀取頁面上的信息並將其發送給某個第三方。讓你的口號謹慎。

來源

2011-02-24 14:53:32

您不能使用Ajax/JSON，因爲子域是單獨的域。您可以，但使用JSONP。 jQuery有這個內置的，所以你只需要在你的請求中指定。看看相關的docs。您不能在JSONP中使用POST（這受限於此技術的工作方式），但沒有其他方式可以執行跨瀏覽器的跨域請求。

來源

2011-02-24 14:53:03 jwueller

設置document.domain到主域

document.domain = "mydomain.com"

More info here

來源

2013-10-01 09:36:13 himynameisjonas

這是一個不同的問題，正確的解決方案。它用於允許與來自子域的提供內容的iframe進行通信。這個問題唯一正確的答案是JSONP或CORS。 –

使用jQuery從子域獲取JSON

回答

相關問題