Tôi muốn biết cách sử dụng XMLHttpRequest để tải nội dung của một URL từ xa và có HTML của trang web được truy cập được lưu trữ trong một biến JS.

Nói, nếu tôi muốn tải và cảnh báo () HTML của http://foo.com/bar.php , tôi sẽ làm thế nào?

Bạn có thể nhận được nó bằng cách XMLHttpRequest.responseTexttrong XMLHttpRequest.onreadystatechangekhi XMLHttpRequest.readyStatetương đương với XMLHttpRequest.DONE.

Đây là một ví dụ (không tương thích với 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);

Để có khả năng tương thích crossbrowser tốt hơn, không chỉ với IE6 / 7, mà còn để khắc phục một số rò rỉ hoặc lỗi bộ nhớ dành riêng cho trình duyệt và cũng để giảm tính chi tiết với các yêu cầu ajaxical, bạn có thể sử dụng jQuery .

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

Lưu ý rằng bạn đã sử dụng chính sách nguồn gốc tương tự cho JavaScript khi không chạy tại localhost. Bạn có thể muốn xem xét để tạo một tập lệnh proxy tại tên miền của bạn.

Tôi muốn đề nghị xem xét fetch. Nó là tương đương ES5 và sử dụng Promise. Nó dễ đọc hơn nhiều và dễ dàng tùy chỉnh.

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

Trong Node.js, bạn sẽ cần nhập fetchbằng:

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

Nếu bạn muốn sử dụng nó một cách đồng bộ (không hoạt động trong phạm vi hàng đầu):

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

Thêm thông tin:

Tài liệu Mozilla

Tôi có thể sử dụng (94% tháng 10 năm 2019)

Hướng dẫn Matt Walsh

Cách đơn giản để sử dụng XMLHttpRequestvới pure JavaScript. Bạn có thể đặt custom headernhưng tùy chọn được sử dụng dựa trên yêu cầu.

1. Sử dụng phương pháp 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);
}

Bạn có thể gửi params bằng phương thức POST.

2. Sử dụng phương thức GET:

Vui lòng chạy bên dưới ví dụ và sẽ nhận được phản hồi 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();
}

Trong XMLHttpRequest, sử dụng XMLHttpRequest.responseTextcó thể đưa ra ngoại lệ như dưới đây

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

Cách tốt nhất để truy cập phản hồi từ XHR như sau

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