Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2017, 10:30
Интересующийся
Отправить личное сообщение для dizelvis Посмотреть профиль Найти все сообщения от dizelvis
 
Регистрация: 05.06.2017
Сообщений: 15

Автообновление информации на странице
Добрый день!

Прошу помощи в моем вопросе.
Задача следующая -
есть скрипт php, выполняющий сложную задачу, в результате выводящий число в процентах, равным прогрессу выполнения скрипта.

Необходимо на странице организовать код javascript, который будет отправлять get-запрос к скрипту и выводить результат на страницу, обновляя его через заданный интервал времени.
То есть получаем текст, выводящийся например на gif анимации загрузки.
Когда php скрипт возвращает 100 - выводим текст "Загрузка завершена" и останавливаем скрипт.
Если скрипт возвращает 0 - выводим ошибку.

Прошу помощи, моих познаний в JS пока не достаточно для полного написания данного скрипта.
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2017, 13:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от dizelvis
код javascript, который будет отправлять get-запрос к скрипту
https://jquery-docs.ru/jQuery.get/
Сообщение от dizelvis
обновляя его через заданный интервал времени
Это метод setTimeout()...

Далее поможет статья
https://learn.javascript.ru/basic-do...т-textcontent
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2017, 16:33
Интересующийся
Отправить личное сообщение для dizelvis Посмотреть профиль Найти все сообщения от dizelvis
 
Регистрация: 05.06.2017
Сообщений: 15

Вот "родил" такой скрипт.
Он получает ответ из 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>
Ответить с цитированием
  #4 (permalink)  
Старый 06.06.2017, 08:16
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Сообщение от dizelvis Посмотреть сообщение
Вот "родил" такой скрипт.
Молодец. ActiveXObject зачем? IE5-6 поддерживать? Кури Server-Sent Events.

Последний раз редактировалось Rise, 06.06.2017 в 08:26.
Ответить с цитированием
  #5 (permalink)  
Старый 06.06.2017, 08:52
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от dizelvis
Добавляю цикл for в функцию - она останавливается после первой интерации
Никаких FORов.
Сообщение от dizelvis
<body onload="show()">
Меняй на
<body onload="setTimeout(show,<время_ожидания>)">


При получении ответа, если процесс не завершен, делаешь аналогичный вызов...
Ответить с цитированием
  #6 (permalink)  
Старый 07.06.2017, 10:26
Интересующийся
Отправить личное сообщение для dizelvis Посмотреть профиль Найти все сообщения от dizelvis
 
Регистрация: 05.06.2017
Сообщений: 15

Сообщение от Rise Посмотреть сообщение
Молодец. ActiveXObject зачем? IE5-6 поддерживать? Кури Server-Sent Events.
спасибо, но по-моему - это не мой случай. выполнение основной задачи будет занимать продолжительное время. Если открыть соединение с этим скриптом, оно будет сброшено по истечении лимита времени, установленного на хостинге.
Ответить с цитированием
  #7 (permalink)  
Старый 07.06.2017, 13:25
Интересующийся
Отправить личное сообщение для dizelvis Посмотреть профиль Найти все сообщения от dizelvis
 
Регистрация: 05.06.2017
Сообщений: 15

Хотя нет... Немного перестроив принцип работы самого скрипта, подойдет.

Вроде бы разобрался. Работает. Если что то не так - подправьте, пожалуйста.
<!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 );



?>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автообновление параметра на странице??? DEFF5555 AJAX и COMET 9 26.04.2016 15:52
Iframe, извлечение информации из произвольной части сайта Stephanos Элементы интерфейса 11 22.06.2015 13:10
Отключение информации о странице при печати методами css Dtri (X)HTML/CSS 1 25.12.2014 10:01
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
Ищю скрипт: смена информации на странице Kroks Общие вопросы Javascript 6 24.11.2010 15:18