0

現在、JavaScript を使用して Web アプリケーションを作成する方法を学んでいます。ハングマン ゲームの開発が完了しました (コードは後で提供されます)。単語の配列を使用して、ランダムな単語を取得して遊びました。しかし、次のステップとして、XMLHttpRequest を使用して別の Web サイトからランダムな単語を取得したいと考えています。前もって感謝します！

<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

same-origin-policy により、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」ですが、サーバーは他の名前を使用してそれを実装する場合があることに注意してください。もう 1 つの一般的なものは、「コールバック」callback=processResultです。接続しているサーバーの API ドキュメントをお読みください。

于 2013-10-04T18:43:54.490 に答える