Quiero crear un jQuery Progress Listener.
Tengo un botón que al hacer clic ejecuta un script PHP, que ejecuta un montón de funciones y bucles foreach y tarda un poco en cargarse.
Quiero obtener una respuesta en cada ciclo usando XMLHttpRequest() . Estoy usando este video de youtube como referencia. Pero los scripts no están funcionando bien.
Cuando abrí las Herramientas para desarrolladores de Chrome en la pestaña Red, se envía la solicitud checkprogress.php pero la respuesta está "pendiente" hasta que los scripts finalizan la carga, y luego responde al 100 % de repente.
A continuación se muestra el código para cada archivo.
verificarprogreso.php
<?php $file = "progress.txt"; $data = file_get_contents($file); echo $data; ?>Índice.php
<style type="text/css"> #container{ width: 300px; height: 20px; border: solid thin #aaa; } #progress{ background-color: lightblue; height: 100%; width: 100%; color: grey; text-align: center; } </style> <div id="container"><div id="progress">0%</div></div> <button id="start" onclick="begin(event)">Start</button> <script type="text/javascript"> var prog = document.getElementById('progress'); var button = document.getElementById('start'); function begin(event){ xhr = new XMLHttpRequest(); xhr.open("POST", "script.php", true); xhr.onload = function(){ if(xhr.status === 200){ alert(xhr.responseText); clearInterval(timer); } } timer = setInterval(checkProgress, 100); xhr.send(); } function checkProgress(event){ xhr2 = new XMLHttpRequest(); xhr2.open("POST", "checkprogress.php", true); xhr2.onload = function(){ if(xhr2.status === 200){ prog.style.width = xhr2.responseText + "%"; prog.innerHTML = xhr2.responseText + "%"; } } xhr2.send(); } </script>Guión.php
<?php $file = "progress.txt"; for($i = 1; $i<= 10; $i++){ sleep(1); file_put_contents($file, ($i * 10)); } echo "done"; ?>¿Cómo puedo arreglar esto?
Como se dijo anteriormente en el comentario, ajax envía 1 solicitud y solo obtiene una respuesta cuando finaliza el script php, por lo que no hay forma de hacerlo.
Estaba desarrollando el complemento de wordpress y soy nuevo en esto, así que si estoy usando PHP OOP y wordpress, solo necesito enviar la solicitud a través de wp_ajax hook y ejecutar los métodos uno tras otro y cada método debe enviar respuesta a ajax archivo y luego envíe otra solicitud con los datos de respuesta al siguiente método hasta que llegue a la confirmación final, eso es todo, si alguien lo necesita, compartiré el código