使用XMLHttpRequest從其他網站獲取單詞

截至目前，我正在學習使用JavaScript創建Web應用程序。我剛完成開發一個hang子手遊戲（代碼稍後會提供）。我使用了一系列的單詞來獲得隨機單詞。但作爲下一步，我想使用XMLHttpRequest從單獨的網站獲取一個隨機單詞，我想知道是否有人可以指向我的教程或給我一些關於如何開始的信息！在此先感謝！使用XMLHttpRequest從其他網站獲取單詞

<script type="text/javascript"> 
    var myWords = new Array("first", "hello", "goodbye", "random", "word", "last"); 
    var item = myWords[Math.floor(Math.random() * myWords.length)]; 
    var length = item.length; 
    var guessedLetters = ""; 
    var error = 0; 

    function partialWords(item, letters) { 
     var returnLetter = ""; 
     for (i = 0; i < item.length; i++) { 
      if (letters.indexOf(item[i]) !== -1) { 
       returnLetter = returnLetter + item[i]; 
      } else { 
       returnLetter = returnLetter + '_'; 
      } 
     } 
     return returnLetter; 
    } 

    function load() { 
     var input = document.getElementById("hangmanID").value; 
     var myWords2 = (item.indexOf(input) >= 0); 

     if (myWords2 === false) { 
      console.log("That letter is not in the word"); 
      document.getElementById("hangmanID").value = ""; 
      document.getElementById("error").innerHTML = "That letter was wrong!"; 
      document.getElementById("success").innerHTML = ""; 
      error++; 

      if (error > 0) { 
       document.getElementById('hangmanImg').innerHTML = "<img src='assets/" + error + ".png'>"; 
      } else { 
       document.getElementById('hangmanImg').innerHTML = "No Errors yet!"; 
      } 
     } else { 
      console.log("That letter is correct"); 
      var string = item.indexOf(input, 0); 
      console.log(string); 
      document.getElementById("hangmanID").value = ""; 
      document.getElementById("success").innerHTML = "That letter was right!"; 
      document.getElementById("error").innerHTML = ""; 
     } 
      guessedLetters = guessedLetters + input; 
      document.getElementById('hangman').innerHTML = partialWords(item, guessedLetters); 
      document.getElementById("lettersUsed").innerHTML = guessedLetters; 
    } 
</script>

UPDATE： 請注意，我允許使用JSONP

來源

2013-10-04 Daniel Morgan

建議：使用庫（jQuery）/ framework（Bootstrap/Angular/..等）來做到這一點，它已經實現了數百次。但是，如果這是一個學習的運動，精細：P – Populus

@Populus我喜歡，因爲我喜歡jQuery的，但是因爲我學習JavaScript作爲大學jQuery的一個模塊出了問題 –

的。如果其他網站在其他域，請注意[同源策略]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript） – Oriol

由於同源策略，XMLHttpRequest的，一般是不允許從其他領域獲取數據。有解決方案，如CORS或在您的域上使用代理或使用嵌入式Flash或Java小程序。

但是，JSONP是另一回事。這是因爲JSONP在技術上不會返回數據。 JSONP返回一個JavaScript文件。因此，獲得使用JSONP數據只需要你的腳本代碼添加到您的網頁：

<script src="http://other.server.com/path/to/jsonp/data"></script>

要以編程方式做到這一點：

var jsonp = document.createElement('script'); 
jsonp.src = "http://other.server.com/path/to/jsonp/data"; 
document.body.appendChild(jsonp);

這樣做的問題是，腳本標記不返回任何東西。爲了解決這個問題，JSONP協議將一個函數名稱傳遞給服務器，以便服務器將該函數包裝到JSON數據中。

例如，如果你經常JSON數據是這樣的：

{"result":"something"}

的JSONP相當於將是這個樣子：

callback({"result":"something"})

因此，採取原來的例子，我們的新代碼現在是：

function processResult (obj) { 
    console.log(obj); 
} 
var jsonp = document.createElement('script'); 
jsonp.src = "http://other.server.com/path/to/jsonp/data?jsonp=processResult"; 
document.body.appendChild(jsonp);

通知我們如何傳遞函數的名稱來處理重打開URL的查詢參數中的值。

請注意，儘管在本例中參數是「jsonp」，服務器可以使用其他名稱來實現它。另一個常見的是「回撥」，如callback=processResult。閱讀您要連接的服務器的API文檔。

來源

2013-10-04 18:43:54 slebetman

哦，我明白了！非常感謝你，這實際上幫助我更好地理解它 –

我還有一個問題，因爲我沒有回到大學，直到週末之後，你有沒有任何示例網站隨機顯示JSON數據？我只能從我的大學網絡訪問原始網頁。有可能不是，但只是想我會問。謝謝！ –

您可以嘗試USGS地震數據：http：//earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week。它使用稱爲'eqfeed_callback'的硬編碼回調函數，因此您需要在代碼中定義該函數。 – slebetman

使用XMLHttpRequest從其他網站獲取單詞

回答

相關問題