J'aimerais savoir comment utiliser XMLHttpRequest pour charger le contenu d'une URL distante et faire stocker le HTML du site consulté dans une variable JS.

Dites, si je voulais charger et alerter () le HTML de http://foo.com/bar.php , comment ferais-je cela?

Vous pouvez l' obtenir par XMLHttpRequest.responseTextdans XMLHttpRequest.onreadystatechangequand XMLHttpRequest.readyStateégaux à XMLHttpRequest.DONE.

Voici un exemple (non compatible avec IE6 / 7).

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        alert(xhr.responseText);
    }
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);

Pour une meilleure compatibilité entre navigateurs, non seulement avec IE6 / 7, mais également pour couvrir certaines fuites de mémoire ou bogues spécifiques au navigateur, et aussi pour moins de verbosité avec le déclenchement de requêtes ajaxiques, vous pouvez utiliser jQuery .

$.get('http://example.com', function(responseText) {
    alert(responseText);
});

Notez que vous devez prendre en compte la politique de même origine pour JavaScript lorsque vous ne l'exécutez pas sur localhost. Vous pouvez envisager de créer un script proxy sur votre domaine.

Je suggérerais d'examiner fetch. C'est l'équivalent ES5 et utilise des promesses. Il est beaucoup plus lisible et facilement personnalisable.

const url = "https://stackoverflow.com";
fetch(url)
    .then(
        response => response.text() // .json(), etc.
        // same as function(response) {return response.text();}
    ).then(
        html => console.log(html)
    );

Dans Node.js, vous devrez importer en fetchutilisant:

const fetch = require("node-fetch");

Si vous souhaitez l'utiliser de manière synchrone (ne fonctionne pas dans la portée supérieure):

const json = await fetch(url)
  .then(response => response.json())
  .catch((e) => {});

Plus d'informations:

Documentation Mozilla

Puis-je utiliser (94% oct.2019)

Tutoriel Matt Walsh

La façon simple d'utiliser XMLHttpRequestavec pure JavaScript. Vous pouvez définircustom header mais il est facultatif utilisé en fonction des besoins.

1. En utilisant la méthode POST:

window.onload = function(){
    var request = new XMLHttpRequest();
    var params = "UID=CORS&name=CORS";

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('POST', 'https://www.example.com/api/createUser', true);
    request.setRequestHeader('api-key', 'your-api-key');
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(params);
}

Vous pouvez envoyer des paramètres en utilisant la méthode POST.

2. En utilisant la méthode GET:

Veuillez exécuter l'exemple ci-dessous et obtiendrez une réponse JSON .

window.onload = function(){
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
    request.send();
}

Dans XMLHttpRequest, l'utilisation XMLHttpRequest.responseTextpeut lever l'exception comme ci-dessous

 Failed to read the \'responseText\' property from \'XMLHttpRequest\': 
 The value is only accessible if the object\'s \'responseType\' is \'\' 
 or \'text\' (was \'arraybuffer\')

Meilleur moyen d'accéder à la réponse de XHR comme suit

function readBody(xhr) {
    var data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        data = xhr.response;
    }
    return data;
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        console.log(readBody(xhr));
    }
}
xhr.open('GET', 'http://www.google.com', true);
xhr.send(null);