Autor Tema: [AJAX] Triple consulta (Leído 1571 veces)

Siquillote · « **en:** 08 de Noviembre de 2010, 21:41:37 pm »

¡Hola!Ahora aparte de aprender C he decido aprender un poquitín de Ajax ;O. Me he topado con un ejemplo de G2K en esta misma sección y que mejor para empezar a aprender que ver ejemplos. Pues resulta que funciona muy bien pero solo va a una consulta. Mirar:

Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax para phperos</title>
<script language="javascript" type="text/javascript">
// creamos la funcion getXMLHTTPRequest que identifica al navegador y crea el objeto para la coneccion con ajax
function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
  try {
  req = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (err2) {
    try {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
      req = false;
    }
  }
}
return req;
}
//almacenamos la funcion getXMLHTTPRequest en la variable http para usarla en todo el script ajax
var http = getXMLHTTPRequest();

//la funcion enviarHTTP envia los datos al servidor
function enviarHTTP () {
var valor = document.getElementById("usuario").value; // es el valor del campo de texto 
var rand = parseInt(Math.random()*99999999); //se usa para que la pagina no se cargue del cache del explorador, colocando un número aleatorio en la url nunca se usará la del cache
var query= "usuario=" + valor + "&rand=" + rand;
http.open ("GET", "ajax.php?" + query, true); // abrimos la coneccion indicando el método (GET), la url y si queremos una peticion asincrónica
http.onreadystatechange = respuestaHTTP; //cuando la respuesta del servidor cambie de estado llamamos a la funcion que creamos abajo que devuelve los datos del servidor
http.send(null); // se envia la petición
}

//cuando la respuesta del servidor este completa esta funcion muestra los datos devueltosservidor
function respuestaHTTP () {
if (http.readyState == 4) {  // el numero 4 significa que la peticion ha sido completada
	 if (http.status == 200) { // el 200 significa que la petición fue completada correctamente
var respuesta_php = http.responseText; //almacenamos la respuesta del servidor en una variable
document.getElementById("div_usuario").innerHTML = respuesta_php; //insertamos el contenido que nos devolvió el servidor en el <div> de HTML
}
else 
	//si hay algun error lo muestra y detiene la petición
    alert("Ha habido un problema al acceder al servidor: " + http.statusText);
	setTimeout('Proceso()', 1000);
}
if (http.readyState < 4) {
//esto es para que muestre un mensaje mientras se realiza el proceso
document.getElementById("div_usuario").innerHTML = 'Cargando...';
}
}
</script>
</head>

<body>
<!-- La funcion ajax se activa con el evento onblur //-->
<input name="usuario" type="text" id="usuario" onblur="enviarHTTP ()" />
<!-- En esta capa sale la respuesta devuelta por ajax //-->
<div id="div_usuario" />
</body>
</html>

Pero tanto código (Que sirve para mucho) pero solo para 1 petición... Entonces me gustaría saber si ese mismo código podría reutilizarse o hay que usar 1 código para cada elemento?

Siquillote · « **Respuesta #1 en:** 16 de Noviembre de 2010, 21:05:32 pm »

¿Nadie sabe como puedo hacerlo? Perdón por el doble post.

CarlosRdrz · « **Respuesta #2 en:** 16 de Noviembre de 2010, 21:35:12 pm »

En teoría podrías, después de usar el método send, usar de nuevo el método open, luego otra vez el onreadystatechange, luego otra vez el send, luego de nuevo el open... y así constantemente.

Prueba a ver.

Saludos

Siquillote · « **Respuesta #3 en:** 16 de Noviembre de 2010, 22:40:08 pm »

Muuuuy díficil. Crear lo que me has dicho sin problemas pero la duda que tengo es que como sabe Ajax que petición/es quiero hacer. Por ejemplo, en esta parte:

Código: [Seleccionar]

/cuando la respuesta del servidor este completa esta funcion muestra los datos devueltosservidor
function respuestaHTTP () {
if (http.readyState == 4) {  // el numero 4 significa que la peticion ha sido completada
	 if (http.status == 200) { // el 200 significa que la petición fue completada correctamente
var respuesta_php = http.responseText; //almacenamos la respuesta del servidor en una variable
document.getElementById("div_usuario").innerHTML = respuesta_php; //insertamos el contenido que nos devolvió el servidor en el <div> de HTML
}
else 
	//si hay algun error lo muestra y detiene la petición
    alert("Ha habido un problema al acceder al servidor: " + http.statusText);
	setTimeout('Proceso()', 1000);
}
if (http.readyState < 4) {
//esto es para que muestre un mensaje mientras se realiza el proceso
document.getElementById("div_usuario").innerHTML = 'Cargando...';
}
}

¿Como sabe if (http.readyState == 4) { si estoy llmando la 1 o 2 la 2 o la 3 consulta?

CarlosRdrz · « **Respuesta #4 en:** 16 de Noviembre de 2010, 23:23:16 pm »

En la linea
http.onreadystatechange = respuestaHTTP;

Señalas que función quieres que haga cada petición.

Puedes usar varias funciones si necesitas una diferente para cada petición, o la misma si quieres, es cuestión de gustos, pero el caso es que tu tienes que señalar que función manejará cada una de las peticiones.

Saludos

Siquillote · « **Respuesta #5 en:** 26 de Noviembre de 2010, 16:22:57 pm »

Nada, lo he intentado 4 veces y no se que hacer....

Tope · « **Respuesta #6 en:** 02 de Diciembre de 2010, 18:07:47 pm »

Y no es más facil usar jQuery (vale, sí, ocupa bastante, pero seguro que la utilizas más de una vez...)

Para incluirla, nada más fácil que:

Código: [Seleccionar]

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Y para usarla, por ejemplo para POST...

Código: [Seleccionar]

$.post("prueba.php", { nombre: "Tope", action: "add" }, function(respuesta){ alert("Respuesta "+respuesta); });

Creo yo que usando jQuery como el código te queda mejor colocado (y sin tanto jaleo) te será más fácil...

Siquillote · « **Respuesta #7 en:** 02 de Diciembre de 2010, 18:10:34 pm »

Cita de: Tope en 02 de Diciembre de 2010, 18:07:47 pm

Y no es más facil usar jQuery (vale, sí, ocupa bastante, pero seguro que la utilizas más de una vez...)

Para incluirla, nada más fácil que:
Código: [Seleccionar]
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
Y para usarla, por ejemplo para POST...
Código: [Seleccionar]
$.post("prueba.php", { nombre: "Tope", action: "add" }, function(respuesta){ alert("Respuesta "+respuesta); });

Creo yo que usando jQuery como el código te queda mejor colocado (y sin tanto jaleo) te será más fácil...

Y tanto que pesa, además, yo no se usar jQuery. ¿A donde tendría que aplicar el código que mencionas?

Noticias:

Autor Tema: [AJAX] Triple consulta (Leído 1571 veces)

Siquillote

[AJAX] Triple consulta

Comunidad PHPeros

[AJAX] Triple consulta

Siquillote

Re:[AJAX] Triple consulta

CarlosRdrz

Re:[AJAX] Triple consulta

Siquillote

Re:[AJAX] Triple consulta

CarlosRdrz

Re:[AJAX] Triple consulta

Siquillote

Re:[AJAX] Triple consulta

Tope

Re:[AJAX] Triple consulta

Siquillote

Re:[AJAX] Triple consulta