AJAX запрос по заходу на страницу в PHP

Иногда нужно осуществлять автоматический AJAX запрос сразу по заходу на страницу, без каких-либо действий пользователя. Давайте напишем пример такого кода.

Здесь есть некоторые нюансы. Чтобы код выполнился сразу по заходу, его нужно просто написать в JavaScript файле, например, вот так:

javascriptlet response = await fetch('ajax.php');
let text = await response.text();

console.log(text);

В этом коде, однако, есть проблема - команда await не работает без функции, объявленной как async.

Решим проблему через вызов функции на месте, объявив эту функцию асинхронной:

javascript(async function() {
  let response = await fetch('ajax.php');
  let text = await response.text();
  
  console.log(text);
})();

Задание 1

Пусть страница index.php имеет следующий вид:

index.php<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <main></main>
    <script src="script.js"></script>
  </body>
</html>

Пусть страница ajax.php возвращает следующий HTML код:

ajax.php<h1>Main Header</h1>

<div class="post">
  text text text 
</div>
<div class="post">
  text text text 
</div>
<div class="post">
  text text text 
</div>

Сделайте так, чтобы по заходу на страницу index.php через AJAX загрузилось содержимое страницы ajax.php и вставилось в тег main.

Задание 2

В файле ajax.php сымитируйте задержку загрузки. Пока ожидается выполнение AJAX запроса, покажите спиннер в теге main.