Comment obtenir la réponse de XMLHttpRequest?

Question

Je voudrais savoir comment utiliser XMLHttpRequest pour charger le contenu d'une URL distante et avoir le code HTML du site consulté stocké dans une variable JS.

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

Answer 1

Vous pouvez l'obtenir par XMLHttpRequest.responseText en 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é crossbrowser, non seulement avec IE6/7, mais aussi pour couvrir des fuites de mémoire spécifiques au navigateur ou des bugs, et aussi moins verbosité avec la cuisson des demandes ajaxical, vous pouvez utiliser jQuery.

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

Notez que vous avez à prendre en compte lors de Same origin policy for JavaScript ne fonctionne pas à localhost. Vous pouvez envisager de créer un script proxy sur votre domaine.

Answer 2

En XMLHttpRequest, en utilisant XMLHttpRequest.responseText peut soulever 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\') 

Le meilleur moyen 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); 

Answer 3

Je suggère à la recherche dans fetch. C'est l'équivalent ES5 et utilise Promises. C'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) 
 
    );

Plus d'info:

Mozilla Documentation

Can I Use (88% Mar 2018)

Matt Walsh Tutorial