web-dev-qa-db-fra.com

Comment obtenir la réponse de XMLHttpRequest?

J'aimerais savoir comment utiliser XMLHttpRequest pour charger le contenu d'une URL distante et que le code HTML du site auquel vous avez accédé soit stocké dans une variable JS.

Dis, si je voulais charger et alerter () le code HTML de http://foo.com/bar.php , comment pourrais-je le faire?

javascriptxmlhttprequest
162
Rohan

Vous pouvez l'obtenir par XMLHttpRequest.responseText dans XMLHttpRequest.onreadystatechange lorsque _XMLHttpRequest.readyState_ est égal à _XMLHttpRequest.DONE_.

Voici un exemple (non compatible avec 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);
_

Pour une meilleure compatibilité entre navigateurs, non seulement avec IE6/7, mais également pour couvrir certaines fuites de mémoire ou certains bugs propres au navigateur, et pour une utilisation moins verbeuse des requêtes ajaxiques, vous pouvez utiliser jQuery .

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

Notez que vous devez prendre en compte le politique de même origine pour JavaScript lorsque vous ne l'exécutez pas sur localhost. Vous voudrez peut-être envisager de créer un script proxy sur votre domaine.

248
BalusC

Je suggérerais de regarder dans fetch. C'est l'équivalent ES5 et utilise Promises. Il est beaucoup plus lisible et facilement personnalisable.

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

Dans Node.js, vous devez importer fetch en utilisant:

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

Si vous souhaitez l’utiliser de manière synchrone (ne fonctionne pas dans le top scope):

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

Plus d'informations:

Documentation Mozilla

Puis-je utiliser (91% Mars 2019)

Tutoriel Matt Walsh

22
Gibolt

La façon simple d'utiliser XMLHttpRequest avec pure JavaScript. Vous pouvez définir custom header mais il est facultatif et utilisé en fonction des besoins.

1. Utilisation de la méthode 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);
}

Vous pouvez envoyer des paramètres en utilisant la méthode POST.

2. Utilisation de la méthode GET:

Veuillez exécuter l'exemple ci-dessous et vous obtiendrez une réponse 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();
}
15
Mayur S

Dans XMLHttpRequest, utiliser XMLHttpRequest.responseText peut déclencher l'exception comme ci-dessous

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

Meilleure façon d'accéder à la réponse de XHR comme suit

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);
14
Fizer Khan