Автообновление информации на странице
Добрый день!
Прошу помощи в моем вопросе. Задача следующая - есть скрипт php, выполняющий сложную задачу, в результате выводящий число в процентах, равным прогрессу выполнения скрипта. Необходимо на странице организовать код javascript, который будет отправлять get-запрос к скрипту и выводить результат на страницу, обновляя его через заданный интервал времени. То есть получаем текст, выводящийся например на gif анимации загрузки. Когда php скрипт возвращает 100 - выводим текст "Загрузка завершена" и останавливаем скрипт. Если скрипт возвращает 0 - выводим ошибку. Прошу помощи, моих познаний в JS пока не достаточно для полного написания данного скрипта. |
Цитата:
Цитата:
Далее поможет статья https://learn.javascript.ru/basic-do...т-textcontent |
Вот "родил" такой скрипт.
Он получает ответ из test.php и выводит его в блок <div> С циклом ковыряюсь - пока никак не получается (( Добавляю цикл for в функцию - она останавливается после первой интерации
<html><body onload="show()">
<script>
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function show() {
var req = getXmlHttp()
var statusElem = document.getElementById('progress')
req.onreadystatechange = function() {
if (req.readyState == 4) {
statusElem.innerHTML = req.responseText;
if(req.responseText == 100) {
statusElem.innerHTML = "Выполнение задания завершено";
}
}
}
req.open('GET', 'test.php', true);
req.send(null); // отослать запрос
statusElem.innerHTML = 'Ожидаю ответа сервера...'
}
</script>
<div id="progress">Здесь будет ответ сервера</div>
</body></html>
|
Цитата:
Цитата:
<body onload="setTimeout(show,<время_ожидания>)"> При получении ответа, если процесс не завершен, делаешь аналогичный вызов... |
Цитата:
|
Хотя нет... Немного перестроив принцип работы самого скрипта, подойдет.
Вроде бы разобрался. Работает. Если что то не так - подправьте, пожалуйста.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
var eventSource;
function start() { //
if (!window.EventSource) {
alert('В этом браузере нет поддержки EventSource.');
return;
}
eventSource = new EventSource('test.php');
eventSource.onopen = function(e) {
// соединение открыто
};
eventSource.onerror = function(e) {
if (this.readyState == EventSource.CONNECTING) {
} else {
log("Ошибка, состояние: " + this.readyState);
}
};
eventSource.addEventListener('bye', function(e) {
eventSource.close();
log("Выполнение задания завершено");
}, false);
eventSource.onmessage = function(e) {
console.log(e);
log(e.data);
};
}
function stop() {
eventSource.close();
log("Соединение завершено");
}
function log(msg) {
logElem.innerHTML = msg + "<br>";
}
</script>
</head>
<body onload="start()">
<div id="logElem"></div>
</body>
</html>
файл test.php
<?php
header ('Content-Type: text/event-stream; charset=utf-8');
$data = file_get_contents ( 'temp.txt' );
echo "data: " . $data . "%\r\n\r\n";
if ( $data == 100)
{
echo "event: bye\r\n";
echo "data: 100\r\n\r\n";
file_put_contents ( 'temp.txt', 95 );
exit;
}
file_put_contents ( 'temp.txt', $data + 1 );
?>
|
| Часовой пояс GMT +3, время: 06:40. |