Как выполнять JS скрипт когда выполнится AJAX запрос?

Question

[ImagineWorld]

У меня есть ajax запрос, по итогам которого в DOM добавляется элемент. Как сделать так, чтобы скрипт включался в работу только тогда, когда завершился запрос и отрисовался элемент,а не сразу после загрузки страницы? Потому что если просто добавить его через script в index.html, то он выполняется по окончанию загрузки страницы, однако нужного ему для работы элемента еще нет странице, потому что AJAX асинхронный и рисует его когда вся страница уже прогрузилась.

Answer 1

[t800zippygod]

Вам надо запускать скрипт из в коллбеке/промисе Ajax запроса.

Comments

[ImagineWorld]

у меня скрипт в отдельном файле лежит,я так и сделал, чтоб в странице подключался скрипт когда закончится запрос, но если повторить запрос,то файл по новой подключается: добавляется через script к html и там их уже два, а если дальше делать запрос,то три и т.д. Как можно этого избежать?

[t800zippygod]

Можете добавить id скрипту и проверять, если уже есть такой скрипт, то не добавлять новый.

Answer 2

[SaNFeeD]

Если я все правильно понял, то так.
Сделать переменную, куда будет сохраняться результат.

let request = '';
let xhr = new XMLHttpRequest();

xhr.open('GET',  'site.com',  true);
xhr.send();

if (xhr.status != 200) {
  alert( xhr.status + ': ' + xhr.statusText );
} else {
  request =  xhr.responseText;
}

Затем когда уже ajax отработал, то дожидаемся загрузки страницы и вставляем код

window.onload = () => {
  document.querySelector('.some-element').append(request);
}

Либо можно весь запрос поместить в функцию выше и обойтись без лишней переменной.
Если интересно, то можете почитать про AJAX