Me gustaría saber cómo usar XMLHttpRequest para cargar el contenido de una URL remota y almacenar el HTML del sitio al que se accede en una variable JS.

Digamos, si quisiera cargar y alertar () el HTML de http://foo.com/bar.php , ¿cómo lo haría?

Se puede conseguir por XMLHttpRequest.responseTexten XMLHttpRequest.onreadystatechangecuando XMLHttpRequest.readyStatees igual a XMLHttpRequest.DONE.

Aquí hay un ejemplo (no compatible 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);

Para una mejor compatibilidad entre navegadores, no solo con IE6 / 7, sino también para cubrir algunas fugas o errores de memoria específicos del navegador, y también para una menor verbosidad al disparar solicitudes ajaxical, puede usar jQuery .

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

Tenga en cuenta que debe tener en cuenta la misma política de origen para JavaScript cuando no se ejecuta en localhost. Es posible que desee considerar crear una secuencia de comandos proxy en su dominio.

Sugeriría investigar fetch. Es el equivalente de ES5 y utiliza Promesas. Es mucho más legible y fácilmente personalizable.

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

En Node.js, deberá importar fetchutilizando:

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

Si desea usarlo sincrónicamente (no funciona en el alcance superior):

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

Más información:

Documentación de Mozilla

¿Puedo usar (94% Oct 2019)

Matt Walsh Tutorial

La forma sencilla de usar XMLHttpRequestcon pure JavaScript. Puede configurar, custom headerpero es opcional, se utiliza según los requisitos.

1. Usando el método 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);
}

Puede enviar parámetros utilizando el método POST.

2. Usando el método GET:

Ejecute el siguiente ejemplo y obtendrá una respuesta 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();
}

En XMLHttpRequest, el uso XMLHttpRequest.responseTextpuede generar la excepción como a continuación

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

La mejor manera de acceder a la respuesta de XHR de la siguiente manera

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