javascript - Hur får man svaret från XMLHttpRequest?

Jag skulle vilja veta hur man använder XMLHttpRequest för att ladda innehållet från en fjärr-URL och lagra HTML:en från den åtkomna sidan i en JS-variabel.

Säg, om jag ville ladda och alert() HTML-koden från http://foo.com/bar.php, hur skulle jag göra det?

Svar #1

Du kan få det via XMLHttpRequest.responseText i XMLHttpRequest.onreadystatechange när XMLHttpRequest.readyState är lika med XMLHttpRequest.DONE.

Här är ett exempel (inte kompatibelt med 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);

För bättre korsbläddringskompatibilitet, inte bara med IE6/7, utan också för att täcka vissa webbläsarspecifika minnesläckor eller buggar, och även för mindre ordflöde vid utskick av ajax-liknande förfrågningar, kan du använda jQuery.

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

Observera att du måste ta hänsyn till Same origin-policy för JavaScript när du inte kör på localhost. Du kan vilja överväga att skapa ett proxy-skript på din domän.

Svar #2

Använd fetch!

Det är mycket mer läsbart och lätt att anpassa. Alla moderna webbläsare och Node stöder det. Här är en mer djupgående handledning

const url = "https://stackoverflow.com";
fetch(url)
  .then(
    response => response.text() // .json(), .blob(), etc.
  ).then(
    text => console.log(text) // Handle here
  );

Du kan valfritt skicka med en andra parameter, beroende på behovet/typen av förfrågan.

// Example request options
fetch(url, {
  method: 'post', // Default is 'get'
  body: JSON.stringify(dataToPost),
  mode: 'cors',
  headers: new Headers({
    'Content-Type': 'application/json'
  })
})
.then(response => response.json())
.then(json => console.log('Response', json))

I Node.js behöver du importera fetch med:

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

Om du vill använda det synkront (fungerar inte i toppnivå):

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

Mer information:

Matt Walsh-handledning

Mozilla-dokumentation

Kan jag använda

Svar #3

Det enkla sättet att använda XMLHttpRequest med ren JavaScript. Du kan sätta anpassad header men det är valfritt och används beroende på behov.

1. Använda POST-metoden:

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

Du kan skicka parametrar med POST-metoden.

2. Använda GET-metoden:

Kör gärna exemplet nedan så får du ett JSON-svar.

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

Svar #4

I XMLHttpRequest kan användning av XMLHttpRequest.responseText orsaka undantaget som nedan

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

Bästa sättet att få åtkomst till svaret från XHR är som följer

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

Relaterade artiklar