Utilizing XMLHttpRequest to retrieve text from an external webpage

Question

Utilizing XMLHttpRequest to retrieve text from an external webpage

I am currently learning JavaScript to develop web applications. Recently, I completed a hangman game using an array of words to select a random word for the game. Now, my next goal is to utilize XMLHttpRequest to fetch a random word from another website. Does anyone know of a tutorial or have information on how to get started with this? Thank you in advance!

<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: PLEASE NOTE THAT I AM ALLOWED TO USE JSONP

javascript ajax xmlhttprequest

Answer 1

Answer №1

When it comes to fetching data from other domains, the same-origin policy restricts XMLHttpRequest. However, there are ways to work around this limitation, such as using CORS, setting up a proxy on your domain, or utilizing embedded flash or java applets.

JSONP offers a different approach. Unlike XMLHttpRequest, JSONP does not directly return data but instead returns a javascript file. To fetch data using JSONP, all you need to do is add a script tag to your page like so:

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

If you want to do this programmatically, you can create a script element with the specified source:

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

The challenge with script tags is that they do not return any value. To overcome this, the JSONP protocol sends a function name to the server, prompting the server to wrap that function around the JSON data.

For instance, if your regular JSON data looks like this:

{"result":"something"}

The JSONP equivalent would be formatted like this:

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

To apply this concept in practice, let's modify the original code snippet:

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);

In this updated code, we're passing the designated function name for handling the returned value as a query parameter in the URL.

Keep in mind that while this example uses "jsonp" as the parameter, servers may use alternative names like "callback", such as callback=processResult. Always refer to the API documentation provided by the server you're interacting with.

Answer 2

When it comes to fetching data from other domains, the same-origin policy restricts XMLHttpRequest. However, there are ways to work around this limitation, such as using CORS, setting up a proxy on your domain, or utilizing embedded flash or java applets.

JSONP offers a different approach. Unlike XMLHttpRequest, JSONP does not directly return data but instead returns a javascript file. To fetch data using JSONP, all you need to do is add a script tag to your page like so:

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

If you want to do this programmatically, you can create a script element with the specified source:

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

The challenge with script tags is that they do not return any value. To overcome this, the JSONP protocol sends a function name to the server, prompting the server to wrap that function around the JSON data.

For instance, if your regular JSON data looks like this:

{"result":"something"}

The JSONP equivalent would be formatted like this:

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

To apply this concept in practice, let's modify the original code snippet:

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);

In this updated code, we're passing the designated function name for handling the returned value as a query parameter in the URL.

Keep in mind that while this example uses "jsonp" as the parameter, servers may use alternative names like "callback", such as callback=processResult. Always refer to the API documentation provided by the server you're interacting with.

Utilizing XMLHttpRequest to retrieve text from an external webpage

Answer №1

Similar questions

Is there a maximum size restriction for submitting forms using jQuery's AJAX method?

The size of the popup does not align properly with the content within it

Unable to retrieve the data from the ajax response container

Using ng-repeat to display table data in AngularJS

I am eager to display this JSON data using AngularJS tables

Navigating to the home page when a user is logged in using react-router-dom v6 in ReactJS

Utilizing AJAX to Access JSON Arrays

When implementing fancybox within bxslider, numerous thumbnails are shown simultaneously

Is there a way to add a fade-in and slide-in effect to this dropdown JavaScript, as well as a fade-out and

Error Message: The function "menu" is not a valid function

What is the best way to implement ES2023 functionalities in TypeScript?

Update a specific division

Tips on resolving the Cross-Origin Read Blocking (CORB) error when blocked cross-origin response while using Postman

The main server is not yielding any results from the MongoDB query

Hide the button with jQuery if the variable is empty

How to stop IE from caching ajax-jquery loaded external files

Choose an item from an unsorted list - warning "elementIdAttribute is not a valid function"

Is there a way to retrieve a large number of users through an API using async await?

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

Angular dependency injection function