Я делаю
поиск книг в библиотеках Москвы. Страницы грузятся долго, ищу решение, как ускорить загрузку. Посчитал уместной поисковую выдачу по частям.
Приведу упрощённый пример.
На странице — поле «Название книги» и кнопка. После нажатия кнопки выводится, в каких библиотеках есть книга. Это происходит без перезагрузки страницы.
Проблема в том, что в PHP результат функции checkLibraryOne приходит через секунду, а результат checkLibraryTwo приходится ждать 5 секунд.
Нужно сначала вывести пользователю результат checkLibraryOne, а потом, как придёт,— checkLibraryTwo.
Как это сделать?
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Booksearcher</title>
</head>
<body>
<form>
<input type="text" name="bookTitle" placeholder="Название книги" id="bookTitle" required autofocus>
<input type="button" name="submit" value="Найти" id="submit">
</form>
<script>
document.addEventListener('DOMContentLoaded', start);
function start() {
document.getElementById('submit').addEventListener('click', searchLibraries);
}
function searchLibraries() {
let bookTitle = document.getElementById('bookTitle').value;
let params = 'bookTitle=' + bookTitle;
let xhr = new XMLHttpRequest();
xhr.open('POST', 'server.php');
xhr.onreadystatechange=()=>{
if (xhr.readyState === 4) {
if (xhr.status === 200) alert(xhr.responseText);
else alert('Ошибка: ' + xhr.status);
}
};
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
}
</script>
</body>
</html>
PHP:
<?php
function checkLibraryOne($bookTitle) {
sleep(1);
echo 'Деловая библиотека';
}
function checkLibraryTwo($bookTitle) {
sleep(5);
echo 'Библиотека Некрасова';
}
$bookTitle = $_POST['bookTitle'];
checkLibraryOne($bookTitle);
checkLibraryTwo($bookTitle);
Средний