Использование AJAX для доступа к API Twitter

Question

Я подумываю о добавлении некоторых функций Twitter в мое веб-приложение, поэтому я начал делать некоторые тесты. Я проверил способ вызова URL-адреса поискового URL (больше информации: http://dev.twitter.com/doc/get/search), чтобы получить твиты, содержащие искомое слово/предложение. Я понял, что вы можете сделать это на php, просто получив файл JSON, возвращаемый поисковым URL, с помощью функции file_get_contents(). Также вы можете сделать это непосредственно в JavaScript, создав объект сценария, добавив его в тело и используя параметр обратного вызова URL-адреса поиска для обработки данных.

Различные способы сделать, но это так, как я, наконец, сделал это:

---

ГЛАВНОЕ HTML FILE:

<title>Twitter API JSON</title> 

<script type="text/javascript"> 

    //function that created the AJAX object 
function newAjax(){ 
     var xmlhttp=false; 
     try { 
     xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
     try { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (E) { 
      xmlhttp = false; 
     } 
     } 
     if (!xmlhttp && typeof XMLHttpRequest!='undefined') { 
     xmlhttp = new XMLHttpRequest(); 
     } 
    return xmlhttp; 
} 

//function that search the tweets containing an specific word/sentence 
function gettweets(){ 

     ajax = newAjax(); 

    //ajax call to a php file that will search the tweets 
     ajax.open('GET', 'getsearch.php', true); 

     // Process the data when the ajax object changes its state 
     ajax.onreadystatechange = function() { 
     if(ajax.readyState == 4) { 
      if (ajax.status ==200) { //no problem has been detected 

     res = ajax.responseText; 
     //use eval to format the data 
     searchres = eval("(" + res + ")"); 

     resdiv = document.getElementById("result"); 
        //insert the first 10 items(user and tweet text) in the div 
     for(i=0;i<10;i++){ 
      resdiv.innerHTML += searchres.results[i].from_user+' says:<BR>'+searchres.results[i].text+'<BR><BR>'; 
     } 


      } 
     } 
     } 

    ajax.send(null); 
} //end gettweets function 

</script> 




#search_word Tweets 
<input type="button" onclick="gettweets();"value="search" /> 
<div id="result"> 
<BR> 
</div> 


</html> 

---

PHP, где мы получаем JSON ДАННЫЕ:

$jsonurl = "http://search.twitter.com/search.json?q=%23search_word&rpp=10"; 

$json = file_get_contents($jsonurl,0,null,null); 

echo $json; 

---

И все, так оно работает отлично. Я вызываю файл PHP, он возвращает данные JSON, полученные из URL-адреса поиска, а в основных функциях JavaScript JavaScript вставляю твиты в div. Проблема заключается в том, что в первый раз, я пытался сделать это непосредственно в JavaScript, вызывая поиска URL с помощью Ajax, например:

MAIN HTML FILE:

//same code above 

//ajax call to a php file that will search the tweets 
ajax.open('GET', 'http://search.twitter.com/search.json?q=%23search_word&rpp=10', true); 

//same code above 

Я думал, что он должен вернуть JSON данных, но это не так. Мне интересно, почему нет, и это то, что я хотел бы спросить. Кто-нибудь знает, почему я не могу получить данные JSON с помощью объекта Ajax? Если URL-адрес поиска http://search.twitter.com/search.json?q=%23search_word&rpp=10 возвращает данные JSON, он должен быть получен в объекте ajax, правильно?

Answer 1

Вы не можете сделать запрос перекрестного домена, используя javascript, если только вы не делаете его из аддона браузера.

Answer 2

Запросы XHR обычно ограничены запросами на один домен; например, если вы находитесь на bertsbees.com, вы не можете использовать метод Ajax для извлечения данных с сайта twitter.com.

Таким образом, API Twitter поддерживает популярный метод передачи данных, известный как JSON-P, который на самом деле является просто прославленной технологией инжекции. Вы просто передаете ему метод обратного вызова, и возвращенные данные будут завернуты в вашу желаемую функцию, поэтому он получит значение eval'd и будет передан.