0

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

4

1 回答 1

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

于 2013-10-04T18:43:54.490 回答