Javascript 使用XMLHttpRequest从其他网站获取单词

到目前为止，我正在学习使用JavaScript创建web应用程序。我刚刚完成了一个刽子手游戏的开发（稍后将提供代码）。我使用了一个单词数组来获得一个随机单词。但作为下一步，我想使用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>

var myWords=新数组（“第一”、“你好”、“再见”、“随机”、“单词”、“最后”）；
var item=myWords[Math.floor（Math.random（）*myWords.length）]；
变量长度=项目长度；
var guessedLetters=“”；
var误差=0；
功能部分词（项目、字母）{
var returnLetter=“”；
对于（i=0；i=0）；
如果（myWords2==false）{
console.log（“该字母不在单词中”）；
document.getElementById（“hangmanID”）.value=“”；
document.getElementById（“error”）.innerHTML=“那封信错了！”；
document.getElementById（“成功”）.innerHTML=“”；
错误++；
如果（错误>0）{
document.getElementById（'hangmanImg'）。innerHTML=“”；
}否则{
document.getElementById（'hangmanImg'）.innerHTML=“还没有错误！”；
}
}否则{
console.log（“该字母是正确的”）；
变量字符串=item.indexOf（输入，0）；
console.log（字符串）；
document.getElementById（“hangmanID”）.value=“”；
document.getElementById（“success”）.innerHTML=“那封信是对的！”；
document.getElementById（“错误”）.innerHTML=“”；
}
猜字母=猜字母+输入；
document.getElementById（'hangman'）.innerHTML=partialWords（item，猜字母）；
document.getElementById（“lettersUsed”）.innerHTML=guessedLetters；
}

更新：

---

请注意，由于同源策略，我被允许使用JSONP，XMLHttpRequest通常不允许从其他域获取数据。有一些变通方法，比如CORS，或者在域上使用代理，或者使用嵌入式flash或java小程序

然而，JSONP是另一回事。这是因为JSONP在技术上不返回数据。JSONP返回一个javascript文件。因此，使用JSONP获取数据只需要向页面添加一个脚本标记：

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

问题是脚本标记不会返回任何内容。为了解决这个问题，JSONP协议将函数名传递给服务器，以便服务器将该函数包装在JSON数据周围

例如，如果您的常规JSON数据如下所示：

{"result":"something"}

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

JSONP等价物如下所示：

{"result":"something"}

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文档。

建议：使用库（jQuery）/框架（Bootstrap/Angular/。等）来完成此操作，它已经实现了数百次。但如果这是一个学习练习，那么很好：P@Populus我很喜欢jQuery，但是我在大学里学习JavaScript作为一个模块，jQuery是不可能的。如果另一个网站在其他域中，请注意，如果它有不同的域，使用AJAX从另一个网站获取内容也有限制（偶子域）。你需要在JSONP上对此进行调查。跨域AJAX提示：哦，我明白了！非常感谢，这实际上帮助我更好地理解了它。我还有一个问题要问你，因为我要到周末才回到大学，你有没有任何随机显示JSON数据的示例网站？我只能访问原始网站来自我大学网络的网页。可能没有，但我只是想问一下。谢谢！你可以尝试USGS地震数据：。它使用一个硬编码回调函数，名为

eqfeed\u callback

，所以你需要在代码中定义该函数。还有freegoip.net，它允许你根据ip地址查询用户的位置。支持jsonp使用

回调

查询参数。有关API文档，请访问他们的网站