2010-05-30 2 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); 
    

Теперь данные jsonp с сервера somesite.com могут вызывать функцию в моем коде с данными. Проблема в том, как данные доставляются в экземпляр 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

Вы должны, вероятно, округлить/пол/ограничить это случайное значение, так как имена функций не должны иметь '.' В них. –

+0

Отличная точка зрения, я также должен отметить, что я бы не предложил использовать мой метод ранжирования имени функции. Возможно, что-то вроде: var funcName = "data_" + (+ new Date()) + Math.floor (Math.random() * 100); будет более подходящим. – tbranyen

+0

Отлично! Большое спасибо! –