I'd like to know how to use XMLHttpRequest to load the content of a remote URL and have the HTML of the accessed site stored in a JS variable.

Say, if I wanted to load and alert() the HTML of , how would I do that?

4 Answers

You can get it by XMLHttpRequest.responseText in XMLHttpRequest.onreadystatechange when XMLHttpRequest.readyState equals to XMLHttpRequest.DONE.

Here's an example (not compatible with IE6/7).

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == XMLHttpRequest.DONE) { alert(xhr.responseText); } } xhr.open('GET', ' true); xhr.send(null); 

For better crossbrowser compatibility, not only with IE6/7, but also to cover some browser-specific memory leaks or bugs, and also for less verbosity with firing ajaxical requests, you could use jQuery.

$.get(' function(responseText) { alert(responseText); }); 

Note that you've to take the Same origin policy for JavaScript into account when not running at localhost. You may want to consider to create a proxy script at your domain.

Use fetch!

It is much more readable and easily customizable. All modern browsers and Node support it. Here is a more in depth tutorial

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

You can optionally pass a second param, depending on the needs/type of request.

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

In Node.js, you'll need to import fetch using:

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

If you want to use it synchronously (doesn't work in top scope):

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

More Info:

Matt Walsh Tutorial

Mozilla Documentation

Can I Use

The simple way to use XMLHttpRequest with pure JavaScript. You can set custom header but it's optional used based on requirement.

1. Using POST Method:

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', ' true); request.setRequestHeader('api-key', 'your-api-key'); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.send(params); } 

You can send params using POST method.

2. Using GET Method:

Please run below example and will get an JSON response.

window.onload = function(){ var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log(this.responseText); } }; request.open('GET', '); request.send(); }

In XMLHttpRequest, using XMLHttpRequest.responseText may raise the exception like below

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

Best way to access the response from XHR as follows

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', ' true); xhr.send(null);