[SOLUCIONADO] Problema con Ajax. Recogida de valor con xhttp.responseText

moncag · #1 (**permalink**) 12/02/2016, 07:07

Hola a todos: Os cuento mi problema. Tengo dos archivos.
El primero es un html (index.html) con un formulario que contiene un input, entre otros. Cada vez que escribo un carácter, se ejecuta una función que llama al archivo probarAjax.php, y que a su vez devuelve una respuesta al primero mediante una instrucción 'echo'. Tan simple (o tan complejo) como eso.
Aunque creo que el código está bien, el problema es que el valor devuelto por el archivo php siempre está vacío o no consigo recogerlo (lo hago con xhttp.responseText).
Gracias por vuestra ayuda.

-----Archivo index.html

Código HTML:

<HTML>

<HEAD>

<TITLE>Un Titulo </TITLE>
    <!-- Fichero de jQuery -->
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
	<script type="text/javascript">
		function find(str) {
			var request = new XMLHttpRequest();
			str=$('input:text[name=usuario]').val();
			var xhttp = new XMLHttpRequest (); 
			xhttp.open ("GET", "probarAjax.php", true); 
			xhttp.send (false);
			document.getElementById("livesearch").innerHTML = xhttp.responseText;
        }
	</script>	
</HEAD>

<BODY>


<H1>Otro titulo, esta vez mas largo. </H1>
    <form id="frmAnadirUsuario">
        <div>
            <!-- Relacionamos el 'label' con el campo mediante el atributo 'for' que le relaciona con el 'id' correspondiente -->
            <label for="usuario">Usuario (nif):</label>
            <!-- Atributo 'required' para que el campo sea obligatorio rellenarlo antes de enviar el formulario -->
            <input type="text" name="usuario" id="usuario" onkeyup="find(this.value)" autofocus required>
            <div id="livesearch">-</div>
        </div>
	</form>


	
</BODY>

</HTML>

--Archivo probarAjax.php

Código PHP:

  <?php  
 
$response="probando ajaX"; 
echo $response; 
 
?>

Alexis88 · #2 (**permalink**) 12/02/2016, 09:30

Al ser una petición asíncrona, la respuesta puede ser capturada una vez que la petición se complete, para lo cual debes de utilizar alguno de los eventos del objeto XMLHttpRequest.

Código Javascript:

Ver originalxhttp.addEventListener("load", function(){
    if (this.status == 200){
        document.getElementById("livesearch").innerHTML = this.responseText;
    }
}, false);

Cuando la petición se complete y el código de estado de la misma sea igual a 200 (petición completada con éxito), procede a tomar la respuesta.

Un saludo

moncag · #3 (**permalink**) 12/02/2016, 11:12

Problema solucionado.
Muchas gracias Alexis88.