abortar peticiones anteriores

matak · #1 (**permalink**) 30/10/2008, 11:52

buenas amigos del foro,...

Tengo el siguiente código...

index.php

Código javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function objetoAjax(){
    var xmlhttp=false;
    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 detectkey(evt,obj) {
keycode = (evt.keyCode==0) ? evt.which : evt.keyCode;
if (keycode!=8) {
    cadena=obj.value + String.fromCharCode(keycode);
    pagina='filtra.php?cadena='+cadena;
}else {
    obj.value="";
    pagina='filtra.php';
}
    divcontenido = document.getElementById('tabla_usuarios');
    ajax=objetoAjax();
    ajax.open("POST", pagina, true);
    ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
        divcontenido.innerHTML = ajax.responseText
      }
    }
    ajax.send(null);
}
</script>
</head>
<body>
 
<input type="text" name="nom" id="nom" value="" size="30" maxlength="30" onkeypress="detectkey(event,this)">
<br />
<div id="tabla_usuarios"></div>
</body>
</html>

filtra.php

Código php:

Ver original<?PHP
if (isset($_REQUEST['cadena'])) {
   $_REQUEST['cadena'];
   $query="SELECT nombre,apellido FROM usuarios WHERE (nombre like 'cadena%')";
}else $query="SELECT nombre,apellido FROM usuarios";
 
      $conexion = mysql_connect ($host, $usser, $pass)
         or die ("No se puede conectar con el servidor");
 
      mysql_select_db ("prueba")
         or die ("No se puede seleccionar la base de datos");
      
      $consulta=mysql_query($query,$conexion);
?>
<TABLE>
<TBODY>
<TR>
<TH>Nombre</TH>
<TH>Apellido</TH>
</TR>
<?PHP
      while($row = mysql_fetch_array($consulta)) {
          echo "<TR>";
          echo "<TD>".$row['nombre']."</TD>";
          echo "<TD>".$row['apellido']."</TD>";
          echo "</TR>";
      }
?>
</TBODY>
</TABLE>

La función del código es la siguiente:

Al abrir index.php el navegador presenta un textfield. Cuando tu ingresas un caracter en él, por medio del evento onkeypress, se realiza una petición al servidor mandándole el contenido del textfield. Con esta cadena el servidor realiza un select a una tabla, monta un <table> con el resultado de la consulta y lo envia al cliente que lo inserta en el <div id="tabla_usuario">. El script funciona correctamente y si la consulta anda rapìda parece que estemos haciendo un filtro en el momento.

El problema esta en que realiza una petición por cada tecla que se pulsa y pienso que esto no debe ser muy eficiente.

¿Existiría alguna forma de ir matando los procesos ajax anteriores? es decir, que cuando pulsemos la segunda tecla abortemos la 1ª petición, cuando pulsemos la 3ª vez abortemos la 2ª, y asi sucesivamente teniendo sólo en ejecución la última petición.

No se si abrá alguna solución para esto pero llevo días dándole vueltas y no he dado con nada. Va a ser que se me queda grande...

Muchisimas gracias solamente por leerme y si me hechan un cable pues más gracias aun...

Saludos

GatorV · #2 (**permalink**) 30/10/2008, 11:55

Hola matak,

Busca en el foro, inclusive abajo de este tema hay uno que tiene la solución, llama al método abort() del objeto XMLHTTPRequest.

Saludos.

matak · #3 (**permalink**) 30/10/2008, 12:06

Gracias GatorV por contestar...

Vi el post que me comentas y me puse a buscar info... pero no me quedó muy claro como emprearlo (¿¿ajax.abort()??), como identificar el objeto ajax que quiero destruir(ya que es el anterior) y mucho menos donde colocarlo en mi código...

Al verme en un mar de dudas puse el post aver si alguien me podía hechar una mano

Gracias y Saludos

matak · #4 (**permalink**) 31/10/2008, 02:25

He estado documentandome y aunque no se mucho más que ayer si no me equivoco:
abort:

"El método abort detiene todas las conexiones asíncronas abiertas por el objeto XMLHttpRequest y lo reinicializa poniendo a cero su estado (readyState)"

oXMLHttpRequest - Objeto XMLHttpRequest

oXMLHttpRequest.abort ();

El problema es que tengo una función que se va ejecutando periódicamente cada 1 min. haciendo uso de setInterval(), ésta crea una petición ajax. Si no me equivoco usando el método abort detendría también este proceso,no?Mi duda es si también truncaría la periodicidad de la función, o seguiría ejecutándose al minuto siguiente.

Gracias y Saludos

GatorV · #5 (**permalink**) 31/10/2008, 10:35

Hola matak,

El método abort solo afecta al request que estas haciendo, si quieres parar el intervalo llama a la función clearInterval de Javascript.

Saludos.

matak · #6 (**permalink**) 03/11/2008, 03:14

Gracias GatorV por tu interés.

Hice pruebas con el método abort y no entendía por que no me abortaba los procesos, yo pensaba que abortaba todas la peticiones, tras leer tu contestación me quedó claro. Abort sólo afecta al request que estas usando. Con lo cual no me aborta los anteriores

Con respecto a la función de setInterval ningun problema, precisamente lo que quiero es que no se me trunque.

Como podría hacer para detener los anteriores segun el código que puse anteriormente???

Muchas gracias de antemano

Saludos

GatorV · #7 (**permalink**) 03/11/2008, 11:29

Como te comento debes de usar abort() es la única forma para parar el request activo.

Saludos.

matak · #8 (**permalink**) 05/11/2008, 03:47

Claro,claro con abort(), en el post anterior no me refería a hacerlo de otra forma o con otra función, aunque asi haya podido entenderse.

Como podría hacerse algo asi. Voy a intentar explicarlo:

Process 1 ---Primera vez que pulsamos la tecla. p.e. tecla 'm' (suponagamos que a este proceso le cuesta 15seg)
________________________________________________
| function detectkey(evt->'m',obj->'') { //buscar por 'm'
| .....
| ajax_anterior.abort();
| ajax=objetoAjax()
| ......
|_}_____________________________________________

Process 2 ---Segunda vez que pulsamos la tecla. p.e. tecla 'a'
_________________________________________________
| function detectkey(evt->'a',obj->'m') { //buscar por 'ma'
| .....
| ajax_anterior.abort();
| ajax=objetoAjax()
| ......
|_}______________________________________________

Supongamos que pulsamos la letra 'm' y al paso de 1 seg pulsamos la 'a'. En este momento se debería cancelar el proceso 1 evitando asi los 15 segundos del proceso, pero...¿cómo podría hacer yo para desde el proceso 2 truncar el proceso 1? o lo que es lo mismo ¿cómo podría hacer para que ajax_anterior hiciera referencia al objeto anterior?

Gracias de antemano,...

Saludos

GatorV · #9 (**permalink**) 05/11/2008, 09:44

Guardalo en una variable global y usa esa variable mejor para rastrear el proceso, por ejemplo:

Código javascript:

Ver originalvar ajax = null;
function buscaPorNombre(nombre) {
      if( ajax == null ) {
            ajax = new Ajax();
      }
 
      if( ajax.readyState != 4 || ajax.readyState != 0) {
              ajax.abort();
      }
 
      ajax.open(bla);
}

Saludos.

matak · #10 (**permalink**) 05/11/2008, 10:31

Ok, pillo el concepto,...

La verdad, es que es lógico...y es más sencillo de lo que me podía imaginar,...muchas veces para un problema complejo buscamos también una solución compleja olvidando lo sencilla que nos puede hacer la vida una simple variable global,jeje

Lo pruebo e informo de los resultados

de nuevo gracias GatorV por tu paciencia,...

Saludos...