Ik zou graag willen weten hoe ik XMLHttpRequest kan gebruiken om de inhoud van een externe URL te laden en de HTML van de bezochte site op te slaan in een JS-variabele.

Zeg, als ik de HTML van http://foo.com/bar wil laden en waarschuwen() . php, hoe zou ik dat doen?

Antwoord 1, autoriteit 100%

Je kunt het verkrijgen via XMLHttpRequest.responseTextin XMLHttpRequest.onreadystatechangewanneer XMLHttpRequest.readyStategelijk is aan XMLHttpRequest.DONE.

Hier is een voorbeeld (niet compatibel met 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);

Voor een betere crossbrowser-compatibiliteit, niet alleen met IE6/7, maar ook om bepaalde browserspecifieke geheugenlekken of bugs te dekken, en ook voor minder breedsprakigheid bij het afvuren van ajaxical-verzoeken, kunt u jQuery.

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

Houd er rekening mee dat u het Beleid van dezelfde oorsprong voor JavaScriptrekening te houden wanneer het niet draait op localhost. U kunt overwegen om een proxyscript op uw domein te maken.

Antwoord 2, autoriteit 11%

Ik raad je aan om fetchte bekijken. Het is het ES5-equivalent en maakt gebruik van Promises. Het is veel leesbaarder en gemakkelijk aanpasbaar.

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

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

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

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

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