How to get the response of XMLHttpRequest?

问题:

I\'d like to know how to use XMLHttpRequest to load the content of a remote URL and have the HTML of the accessed site stored in a JS variable.

Say, if I wanted to load and alert() the HTML of http://foo.com/bar.php, how would I do that?

回答1:

You can get it by XMLHttpRequest.responseText in XMLHttpRequest.onreadystatechange when XMLHttpRequest.readyState equals to XMLHttpRequest.DONE.

Here\'s an example (not compatible with 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);

For better crossbrowser compatibility, not only with IE6/7, but also to cover some browser-specific memory leaks or bugs, and also for less verbosity with firing ajaxical requests, you could use jQuery.

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

Note that you\'ve to take the Same origin policy for JavaScript into account when not running at localhost. You may want to consider to create a proxy script at your domain.

回答2:

I\'d suggest looking into fetch. It is the ES5 equivalent and uses Promises. It is much more readable and easily customizable.

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

More Info:

Mozilla Documentation

Can I Use (88% Mar 2018)

Matt Walsh Tutorial

回答3:

In XMLHttpRequest, using XMLHttpRequest.responseText may raise the exception like below

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

Best way to access the response from XHR as follows

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

回答4:

The simple way to use XMLHttpRequest with pure JavaScript. You can set custom header but it\'s optional used based on requirement.

1. Using POST Method:

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

You can send params using POST method.

2. Using GET Method:

Please run below example and will get an JSON response.

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