JS — как сделать подгрузку блока с другой страницы?

Question

[Ilyaploskov]

Нужно загрузить со страницы https://site.ru/ajax-map.html блок id="map-for-ajax" , в блок на текущей странице id="load-map" . Что неправильно делаю?

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

Comments

[Павел]

doc.getElementById('map-for-ajax')[0].innerHTML = document.getElementById('load-map').innerHTML;

getElementById возвращает не коллекцию, и местами поменять элементы, наверное, нужно
и ваш скрипт, и страница ajax-map.html
должны быть на одном домене...

[Ilyaploskov]

Павел, на одном домене конечно.

Ошибка:
Cannot read property '0' of null
at XMLHttpRequest.http.onreadystatechange

[Strannyk]

Ilyaploskov, getElementById возвращает элемент или null, а не массив.
Павел вам сказал уже.

Answer 1

[Виктор П.]

Привет, задача кросс-доменного запроса, насколько я разбираюсь в телекинезе.
Если так, то есть несколько вариантов, (вначале гугл, разумеется):
Первый вариант, если у вас имеется доступ к обоим сайтам, необходимо в том сайте, куда идёт запрос настроить CORS политики.
Второй вариант кастыльный, к примеру, загрузить блок в Iframe, но это вам вряд ли понадобится.
Третий вариант, делать прокси: на своём сервере пишете метод, в котором вызываете нужную страницу, парсите ответ, на выход идёт необходимый кусок html, который уже можно получить аяксом и вставить в нужное место