Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: 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:
<!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?
-
¿Nadie sabe como puedo hacerlo? Perdón por el doble post.
-
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
-
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:
/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?
-
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
-
Nada, lo he intentado 4 veces y no se que hacer....
-
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: <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...
$.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 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: <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...
$.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?