Cách nhận phản hồi của XMLHttpRequest?

Question

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 biến JS.

Giả sử, 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 điều đó như thế nào?

Answer 1

Bạn có thể nhận nó bằng XMLHttpRequest.responseText trong XMLHttpRequest.onreadystatechange khi XMLHttpRequest.readyState bằng 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); 

Đối với khả năng tương thích crossbrowser tốt hơn, không chỉ với IE6/7, mà còn để trang trải một số rò rỉ bộ nhớ trình duyệt cụ thể hoặc lỗi, và cũng ít rườm rà với bắn 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 phải xem tài khoản Same origin policy for JavaScript khi không chạy tại máy chủ cục bộ. Bạn có thể muốn cân nhắc tạo tập lệnh proxy tại miền của mình.

Answer 2

Trong XMLHttpRequest, sử dụng XMLHttpRequest.responseText có thể nâng cao 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 vào các 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); 

Answer 3

tôi khuyên bạn nên nhìn vào fetch. Nó tương đương với ES5 và sử dụng Promises. Nó dễ đọc hơn và dễ dàng tùy biến hơn.

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