JS - how to load a block from another page?

Question

JavaScript

You need to load the block id="map-for-ajax" from the page https://site.ru/ajax-map.html into the block on the current page id="load-map" . What am I doing wrong?

<div id="load-map"></div>
<script>
(function(){
  var http = new XMLHttpRequest();  
  http.open('GET', 'https://site.ru/ajax-map.html');
  http.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var doc = new DOMParser().parseFromString(this.responseText, "text/html");  
      doc.getElementById('map-for-ajax')[0].innerHTML = document.getElementById('load-map').innerHTML;
    }
  }
  http.send(null);
})()
</script>

Answer 1

Hey, cross domain query challenge as far as I'm concerned with telekinesis.
If so, then there are several options, (first Google, of course):
The first option, if you have access to both sites, you need to configure CORS policies on the site where the request goes.
The second option is custom, for example, to load the block into an Iframe, but you are unlikely to need this.
The third option is to make a proxy: on your server, write a method in which you call the desired page, parse the response, the necessary piece of html comes out, which can already be obtained by Ajax and inserted into the right place