ฉันต้องการทราบวิธีการใช้ XMLHttpRequest เพื่อโหลดเนื้อหาของ URL ระยะไกลและมี HTML ของเว็บไซต์ที่เข้าถึงได้เก็บไว้ในตัวแปร JS

พูดถ้าฉันต้องการโหลดและแจ้งเตือน () HTML ของhttp://foo.com/bar.phpฉันจะทำเช่นนั้นได้อย่างไร

คุณจะได้รับโดยXMLHttpRequest.responseTextในXMLHttpRequest.onreadystatechangeเมื่อเท่ากับXMLHttpRequest.readyStateXMLHttpRequest.DONE

นี่คือตัวอย่าง (ไม่รองรับ 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);

เพื่อความเข้ากันได้ของ crossbrowser ที่ดีขึ้นไม่เพียง แต่กับ IE6 / 7 เท่านั้น แต่ยังครอบคลุมถึงการรั่วไหลหรือข้อบกพร่องของหน่วยความจำเฉพาะเบราว์เซอร์และสำหรับการใช้คำร้องขอ ajaxical น้อยกว่าคุณสามารถใช้jQueryได้

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

โปรดทราบว่าคุณต้องใช้นโยบายต้นกำเนิดเดียวกันสำหรับ JavaScriptเมื่อไม่ได้ทำงานที่ localhost คุณอาจต้องการพิจารณาสร้างสคริปต์พร็อกซีที่โดเมนของคุณ

fetchผมขอแนะนำให้มองเข้าไปใน มันเทียบเท่ากับ ES5 และใช้สัญญา สามารถอ่านและปรับแต่งได้ง่ายขึ้น

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

ใน Node.js คุณจะต้องนำเข้าfetchโดยใช้:

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

หากคุณต้องการใช้พร้อมกัน (ไม่ทำงานในขอบเขตด้านบน):

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

ข้อมูลเพิ่มเติม:

เอกสาร Mozilla

ฉันสามารถใช้ (94% ต.ค. 2019)

กวดวิชาแมตต์วอลช์

วิธีง่ายๆในการใช้ด้วยXMLHttpRequest pure JavaScriptคุณสามารถตั้งค่าcustom headerแต่มันเป็นตัวเลือกใช้ตามความต้องการ

1. การใช้วิธีการโพสต์:

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

คุณสามารถส่งพารามิเตอร์โดยใช้วิธี POST

2. ใช้วิธีการ GET:

โปรดเรียกใช้ตัวอย่างด้านล่างและจะได้รับการตอบกลับ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();
}

ในการXMLHttpRequestใช้XMLHttpRequest.responseTextอาจเพิ่มข้อยกเว้นเช่นด้านล่าง

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

วิธีที่ดีที่สุดในการเข้าถึงการตอบสนองจาก XHR ดังต่อไปนี้

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