Mi piacerebbe sapere come utilizzare XMLHttpRequest per caricare il contenuto di un URL remoto e far archiviare l'HTML del sito accessibile in una variabile JS.

Ad esempio, se volessi caricare e avvisare () l'HTML di http://foo.com/bar.php , come lo farei?

È possibile ottenere da XMLHttpRequest.responseTextin XMLHttpRequest.onreadystatechangecui XMLHttpRequest.readyStateè uguale a XMLHttpRequest.DONE.

Ecco un esempio (non compatibile con 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);

Per una migliore compatibilità con i browser, non solo con IE6 / 7, ma anche per coprire alcune perdite di memoria o bug specifici del browser, e anche per meno verbosità con l'invio di richieste ajaxical, è possibile utilizzare jQuery .

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

Tieni presente che devi tenere conto della stessa politica di origine per JavaScript quando non in esecuzione su localhost. Puoi prendere in considerazione l'idea di creare uno script proxy nel tuo dominio.

Suggerirei di esaminare fetch. È l'equivalente ES5 e utilizza le promesse. È molto più leggibile e facilmente personalizzabile.

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

In Node.js, dovrai importare fetchusando:

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

Se si desidera utilizzarlo in modo sincrono (non funziona nell'ambito principale):

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

Ulteriori informazioni:

Documentazione Mozilla

Posso usare (94% ott 2019)

Matt Walsh Tutorial

Il modo semplice di usare XMLHttpRequestcon pure JavaScript. È possibile impostare custom headerma è facoltativo utilizzato in base ai requisiti.

1. Utilizzando il metodo 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);
}

È possibile inviare parametri utilizzando il metodo POST.

2. Utilizzando il metodo GET:

Esegui sotto l'esempio e otterrai una risposta 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();
}

In XMLHttpRequest, l'utilizzo XMLHttpRequest.responseTextpuò sollevare l'eccezione come di seguito

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

Il modo migliore per accedere alla risposta da XHR come segue

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