Comment puis-je faire en sorte que jsonp joue bien avec ma classe?

Question

Cette toute chose jsonp est assez déroutant ...

Voici ce que je veux faire:

• J'ai une classe DataRetriever
• La classe a une méthode GetData

• GetData marques une requête jsonp avec le code suivant:

  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); 
  

Maintenant, les données jsonp du serveur somesite.com peuvent appeler une fonction dans mon code avec les données. Le problème est, comment les données sont-elles livrées à l'instance de DataRetriever qui l'a demandé?

Je suis vraiment coincé ici.

Answer 1

La solution jQuery est venu avec, est de fournir une fonction de rappel anonyme comme ceci:

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

Je pense que cela pourrait être adapté à votre cas aussi.

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

Vous pouvez faire la même chose dans les coulisses de la fonction GetData si vous ne voulez pas fournir une fonction anonyme.

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); 
} 

Notez que vous devrez vous assurer que la requête JSONP accepte le paramètre GET de rappel. Si vous utilisez une API tierce, ils le supportent déjà. J'espère que cela t'aides!