Я хочу создать индикатор выполнения для серверной задачи (написанной на php)
Для учебных целей пример и задача были бы очень упрощенными. Я бы получил текстовое поле на странице клиента, прочитал number , передал его скрипту php с помощью ajax и подсчитал сумму всех чисел from 0 to number (упрощенная задача, которая займет некоторое время для больших чисел, просто для имитировать работу на стороне сервера)
в .html-файле я бы создавал таймер, который вызывал бы функцию каждые n секунд, получая индекс, который мой цикл цикла получал и обновлял индикатор выполнения.
Мой вопрос:
Возможно ли иметь в одном файле php две функции, и как я могу вызвать определенную функцию с помощью ajax: тот, который блокирует цикл для number и другой, который я бы вызывал, чтобы получить текущий индекс, для которого был получен цикл for-loop.
Код, который у меня есть до сих пор:
<!DOCTYPE html> <html> <head> <script> function myTimer() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("percentageDiv").innerHTML=xmlhttp.response; alert(xmlhttp.response); } } xmlhttp.open("GET","getter.php",true); xmlhttp.send(); } function loop(){ var loop_index = document.getElementById("loop_nr").value; var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("sumDiv").innerHTML="Total sum = " + xmlhttp.response; clearInterval(myVar); } } xmlhttp.open("GET","server_side.php?nr="+loop_index,true); xmlhttp.send(); var myVar=setInterval(function(){myTimer()},1000); } </script> </head> <body> <div id="percentageDiv"> Percentage div</div> <div id="sumDiv"></div> <input type="text" id="loop_nr"> <input type="submit" onclick="loop()"> </body> </html>
server_side.php
<?php session_start(); $index=$_GET["nr"]; $progress = 0 ; $sum = 0 ; for ($i = 1; $i <= $index; $i++) { $sum = $sum + $i; $progress++; $_SESSION['progress'] = $progress; } echo $sum; ?>
getter.php
<?php session_start(); $progress = $_SESSION['progress']; echo $progress; ?>
Спасибо!
Ваш вопрос будет два:
Ваш код AJAX в порядке. Единственное, что вам нужно сделать на вашем PHP, – это получить этот звонок.
Посмотрите на ваш запрос. Вы отправляете переменную nr с вашим запросом:
server_side.php?nr="+loop_index
Это поможет нам в PHP-коде определить, что это вызов AJAX для выполнения операции суммирования. Теперь в PHP:
<?php session_start(); //We look at the GET php variable to see if the "nr" is coming if(isset($_GET['nr'])) { //Its coming!. Now we procede to call our function to sum $result = sum($_GET['nr']); } function sum($nr) { $progress = 0 ; $sum = 0 ; for ($i = 1; $i <= $nr; $i++) { $sum = $sum + $i; $progress++; $_SESSION['progress'] = $progress; } echo $sum; }
Это оно.
Нам нужно сделать другой вызов AJAX, чтобы запросить прогресс в PHP.
Во-первых, мы делаем еще один вызов AJAX для получения прогресса с помощью таймера!
var timer; //try to delete duplications. Do a generic function that does the request to php function makeRequest(toPHP, callback) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { callback(xmlhttp.response); } } xmlhttp.open("GET",toPHP,true); xmlhttp.send(); } function loop() { var loop_index = document.getElementById("loop_nr").value; makeRequest("server_side.php?nr="+loop_index, function(response) { document.getElementById("sumDiv").innerHTML="Total sum = " + response; clearInterval(timer); }); timer=setInterval(makeRequest("getter.php", function(response) { document.getElementById("percentageDiv").innerHTML=response; }),1000); }
Затем в php-стороне мы получаем этот вызов, как мы это делали раньше, и повторяем $_SESSION['progress'] (как вы уже это сделали)
<?php session_start(); $progress = $_SESSION['progress']; echo $progress; ?>
Вот и все!
Вот решение сделать индикатор выполнения на PHP без javascript только на стороне сервера:
echo "<div style=\"float:left;\">Start... </div>"; for ($i = 0; $i<20; $i++){ echo '<div style="float:left;background-color:red;height:20px;width:'.$i.'px"></div>'; ob_flush(); flush(); usleep(100000); } echo "<div style=\"float:left\"> Done!</div>."; ob_end_flush();exit;