Utilisation de l'API REST Twitter au format JSON avec AJAX

Question

J'essaye de faire AJAX sur Twitter API REST (format JSON). J'ai fait la chose ci-dessous, mais rien ne se passe.

Aucune réponse du serveur (Twitter). Ai-je manqué quelque chose?

function getRecentTweet(){ 

     twitterUsername = document.getElementById("twitterUsername").value; 

     if(window.XMLHttpRequest){ 
      xhr = new XMLHttpRequest(); 
     } 
     else{ 
      xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xhr.open("GET", "http://api.twitter.com/1/statuses/user_timeline/" + twitterUsername + ".json", true); 
     xhr.send(null); 

     xhr.onreadystatechange = function(){ 
      if (xhr.readyState == 4) { 
       if(xhr.status == 200) { 
        var jsonObj = eval(responseJSON); 
        document.getElementById("twitterStream").innerHTML = jsonObj[0].text; 
       } 
      } 
     } 
    } 

Merci!

Answer 1

Oui, les appels AJAX inter-domaines ne sont pas autorisés. Vous devez utiliser JSONP.

Effectuez une requête sur l'API de Twitter et ajoutez le paramètre callback. Voici un exemple d'URL:

http://api.twitter.com/1/statuses/user_timeline/hulu.json?callback=myFunction

La réponse de Twitter contiendra alors le code JavaScript exécutable avec le nom de la fonction que vous avez spécifié comme paramètre de rappel. Donc, la réponse de Twitter ressemble:

myFunction(<JSON here>); 

Depuis interdomaine est un problème, vous devez ajouter une balise de script à la page et définissez l'attribut src à l'URL ci-dessus. Cela peut être créé et injecté dans la page de manière dynamique avec JavaScript.

<script src=" ... hulu.json?callback=myFunction"></script> 

définit alors une fonction globale myFunction sur la page qui obtient toujours appelé à chaque fois que la réponse de Twitter retourne. Cela aussi peut être prédéfini ou généré dynamiquement.

<script> 
function myFunction(data) { 
    console.log(data); 
} 
</script> 

Answer 2

Vous pouvez éviter d'utiliser eval ainsi et utiliser la méthode JSON.parse().

Si vous le souhaitez, vous pouvez obtenir la réponse, l'enregistrer dans un serveur de fichiers json local et y accéder à l'aide de AJAX. Par conséquent, vous pouvez appeler votre script côté serveur et éviter d'utiliser JSONP qui est un code JavaScript exécuté. Twitter semble assez sûr mais on ne sait jamais après LinkedIn, Yahoo, les failles de sécurité.