Question

截至目前，我正在学习使用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>

更新请注意我允许使用JSONP

Answer 1

由于同源策略，通常不允许XMLHttpRequest从其他域获取数据。有一些解决办法，例如CORS或在您的域上使用代理或使用嵌入式闪存或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文档。

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

1 个答案: