2010-05-30 200 views
2

這整個事情JSONP是相當混亂......我怎樣才能讓jsonp和我的班級一起玩呢?

這是我想做的事:

  • 我有一個類DataRetriever
  • 類有一個方法GetData
  • GetData品牌帶有以下代碼的jsonp請求:

    var new_tag = document.createElement('script'); 
    new_tag.type = 'text/javascript'; 
    new_tag.src = 'http://somesite.com/somemethod?somedata'; 
    // Add the element 
    var bodyRef = document.getElementsByTagName("body").item(0); 
    bodyRef.appendChild(new_tag); 
    

現在,來自服務器somesite.com的jsonp數據可以在我的代碼中用數據調用函數。問題是,數據如何傳遞到請求它的DataRetriever的實例?

我真的被困在這裏。

回答

4

的jQuery想出瞭解決方案,是提供這樣一個匿名的回調函數:

jQuery.getJSON("http://mycrossdomain.com/?callback=?", function(data) { 
    // Now I have the data 
}); 

我認爲這可能是適合您的情況也是如此。

var data = new DataRetriever(); 
data.GetData(function(data) { 
    // Now I have the data 
}); 

你可以做在的GetData功能在幕後同樣的事情,如果你不想提供一個匿名函數。

function GetData(callback) { // optional 
    // Create random function name however you want 
    var funcName = "data_" + (+new Date() + Math.floor(Math.random()*100)), 
     // Moved this up to be available in the random function 
     new_tag = document.createElement('script'); 
    // This part will allow you to do the callback behind the scenes if callback isn't provided as a param 
    callback = callback || function(data) { 
     this.dataReturned = data; // or something 
    } 
    // Assign it to the window object 
    window[funcName] = function(data) { 
     callback(data); 
     // Unassign this function 
     delete window[funcName]; 
     // Recycle the script tag 
     document.body.removeChild(new_tag); 
    } 
    new_tag.type = 'text/javascript'; 
    new_tag.src = 'http://somesite.com/somemethod?callback='+funcName; 
    // Add the element 
    document.body.appendChild(new_tag); 
} 

請注意您必須確保JSONP請求接受回調GET參數。如果你使用的是第三方API,他們已經可以支持這一點。希望這可以幫助!

+0

你應該輪到/ floor/ceil,隨機值作爲函數名不應該有'.'。 – 2010-05-30 02:53:17

+0

非常好的一點,我也應該注意到,我不會建議使用我的函數名隨機化方法。可能類似於: var funcName =「data_」+(+ new Date())+ Math.floor(Math.random()* 100); 會更合適。 – tbranyen 2010-05-30 02:58:45

+0

非常好!非常感謝你! – 2010-05-30 03:08:37