2010-05-30 195 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