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

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

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

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

console.log(text);

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

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

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

Пусть страница 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 код:

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

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