Si sigues los pasos no te sera muy dificil.
Por ahora solo es copiar y pegar
Crea los archivos por nombre:
y colocalos todos en el mismo directorio
Luego ingresa por principal.php
principal.php Código PHP:
<script type="text/javascript" language="javascript" src="scriptAjax.js"></script>
<script type="text/javascript" language="javascript">
var count=0;
function mostrarContador(){
//llama cada un milisegundo 1000 (o sea un segundo)
TimeOut = setTimeout("mostrarContador()",1000);
document.getElementById('muestraContador').innerHTML=count;
count++;
}
</script>
<a href="#" onclick="llamarAjax(),mostrarContador()">Ejecutar script php y mostrar contador</a>
<div id="muestraContador"></div>
<div id="muestraContenido"></div>
scriptAjax.js Código PHP:
// JavaScript Document
// JavaScript Document
function getXMLHTTPRequest()
{
var req = false;
try
{
req = new XMLHttpRequest(); /* p.e. Firefox */
}
catch(err1)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP");
/* algunas versiones IE */
}
catch(err2)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP");
/* algunas versiones IE */
}
catch(err3)
{
req = false;
}
}
}
return req;
}
var miPeticion = getXMLHTTPRequest();
function llamarAjax() {
var miAleatorio=parseInt(Math.random()*99999999);
var url = "scriptPHP.php?myRand="+miAleatorio;
miPeticion.open("GET", url, true);
miPeticion.onreadystatechange = respuestaAjax;
miPeticion.send(null);
}
function respuestaAjax() {
//que aun no hay respuesta del servidor
if(miPeticion.readyState == 4) {
if(miPeticion.status == 200) {
var result = miPeticion.responseText;
document.getElementById('muestraContenido').innerHTML=result;
clearTimeout(TimeOut);
count=0;
} else {
alert("Ha ocurrido un error: " + miPeticion.statusText);
}
} else {
}
} //END respuestaAjax()
scriptPHP.php Código PHP:
<?
//con sleep(6) el script demorara 6 segundos en ejecutarse
//es para simular el tiempo de espera
sleep(6);
echo "El script php ha terminado el proceso.";
?>
Esto te permitirar mostrar un pequeño contador mientras se ejecuta el script.