Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: Martin10 en 15 de Enero de 2008, 05:53:49 am
-
Bueno les comento que hace poco empece con ajax y me gusta bastante. Asi que voy a tratar de ayudarles un poco a los que no entienden mucho.
La función de este script es que mientras el usuario completa los datos de un formulario, por ej registrar un usuario, ajax le comunique si el usuario está registrado o no sin tener que recargar la página.
Aca va el código:
index.html
<!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>
ajax.php
<?php
//Aca vamos a "simular" una base de datos con un array
// la variable $_GET[usuario] es la que enviamos mediante ajax
// la respuesta que de php es la que se mostrará en la pagina html
$user=strtolower($_GET[usuario]);
$usuarios= array("martin","pepe","user","phperos","etc");
if(in_array($user,$usuarios)) {
echo "<font color=\"red\">El usuario <b>". $user ."</b> esta ocupado</font>";
}
elseif ($user=='') {
echo "";
}
else {
echo "<font color=\"green\">El usuario <b>". $user ."</b> esta disponible.</font>";
}
?>
Codigo base (by G2K): http://www.phperos.net/foro/index.php/topic,1687.msg13949.html#msg13949
Generalmente en todo script AJAX estan estas 3 funciones:
function getXMLHTTPRequest
Esta funcion no es necesario escribirla cada vez que realizamos un script, ya que se usa para todas las peticiones Ajax (por lo meno que yo sepa hasta ahora). Generalemente la mayoria de los progrmadores le ponen ese nombre, para respetar una especie de "norma".
function enviarHTTP
Esta funcion si es más "personal" ya que cada uno la llama como quiere. Cumple la funcion de comenzar la comunicación con el servidor, enviar la petición, y llamar a la siguiente función que es la que muestra el resultado.
function respuestaHTTP
Si la petición se realizo correctamente, recibe los datos del servidor y los muestra en donde queramos.
Con el tema del archivo ajax.php, yo cree en él un array (para no estar con tantos líos y puedan ver el script con sólo copiar los archivos en el servidor) donde supuestamente sería la base de datos. Se comprueba si el texto introducido en el campo se encuentra en ese array.
En este tutorial mostre la respuesta de ajax devuelta como texto (responseText), osea, la respuesta del servidor es dada como texto. La otra opción es usar responceXML, la cual se utiliza cuando se realizan varias consultas simultaneas, para que la respuesta del servidor sea mas ordenada (con XML). Dentro de poco voy a tratar de hacer un tutorial sobre eso.
Bueno eso es todo, espero que halla servido, y que hallan entendido. Cualquier consulta con el script pregunten ;)
Un saludo.
-
Se ve que no tubo éxito el tutorial, no lo vio nadie xD
-
es el mismo codigo de G2K xD Solo que cambian algunas cosas ::)
-
Eso parece, porque los códigos ajax son casi siempre muy parecidos, cambian en pocas cosas. Pero la función es muy diferente.
-
Martín karma+ el tuto esta muy bien hecho y explica paso a paso todo, a ver si con suerte de repetir codigos Ajax se le queda a la gente :D
-
es el mismo codigo de G2K xD Solo que cambian algunas cosas ::)
Y a dejado las explicaciones que hice yo pero bueno... http://www.phperos.net/foro/index.php/topic,1687.msg13949.html#msg13949
en fin...
EDITO: Ahora que miro... es flipante... Un else if para no mostrar nada ni realizar ninguna función xD
elseif ($user=='') {
echo "";
}
-
Y a dejado las explicaciones que hice yo pero bueno... http://www.phperos.net/foro/index.php/topic,1687.msg13949.html#msg13949
en fin...
EDITO: Ahora que miro... es flipante... Un else if para no mostrar nada ni realizar ninguna función xD
elseif ($user=='') {
echo "";
}
G2k:
1- Que te quede claro que yo no copie y pegue nada, todo lo hice yo, si hay explicaciones parecidas será porque la mayoria de los códigos ajax son muy parecidos y hay funciones que se usan en todos.
2- Ese elseif es para que si el usuario no inserto ningun texto no de ningun mensaje, tendrias que fijarte mejor antes de criticar me parece... Si no te das cuenta probá el script sin poner ese elseif y vas a ver que hay diferencia ;)
Saludos
PD: Gracias por el karma nevada ;)
-
Martin10 que te cres que yo me chupo el dedo?
Que casualidad tal parecido no? bueno a mi por lo menos no me vas a engañar y a la mayoria de usuarios tampoco, lo unico que haces es engañarte a ti mismo y ese no es el camino a seguir.
La mayoria de los usuarios de PHPeros eta lleno de gente horada, que se copia un codigo y se edita pues se edita y no pasa nada... pero copiar, pegar y editar y luego negarlo cuando se ve a 2 años luz de distancia... además si ubiera sido igual que tu, nada más ver que copiaste y negaste eso podria haverle dado a borrar post, pero yo no soy ese tipo de gente.
Te aconsejo que cambies tu forma de ser ya que como seas igual en la vida real ya te lo veras.
-
No hay porque pelear tanto.
Los codigos de AJAX son todos casi iguales, en realidad lo que cambia de verdad es el archivo php que procesa, lo demas es parecido en la mayoria de los codigos.
De todas formas yo creia que la gente ponia los codigos y los tutoriales para ayudar a los demas a arrancar en estos temas. Lo que quiero decir con esto es que aunque el codigo este copiado del otro tutorial (No digo que lo este o que no lo este) no deberia de preocuparte G2K.
Concluyendo, martin, ese elseif sigue estando de mas, y la guia esta muy bien.
Saludos
-
No no es que me preocupe sino que crea mal ambiente decir que no a copiado cuando se ve claramente que lo a hecho, de hecho e visto muchos copiar y pegar de codigos mios y nadie se a apropiado del codigo diciendo es mio 100%, y cuando empezaba yo con php que copiaba algo pues lo decia y no pasaba nada de nada.
Si te pusieras a comparar ambos codigos te darias cuenta de que cosas que para que sean iguales en codigos AJAX són practicamente imposible.
-
Haya paz ;)
Opino como TLX, los codigos Ajax son muy similares entre ellos y no hay problema en coger el codigo de otros tutoriales para ahorrar tiempo, aunque es cierto que uno debe ser honrado como G2K ha dicho.
El codigo es útil, es un ejemplo más y tenemos que quedarnos con eso ;)
-
xD disculpen pero es qu eme imagine a naveda con un vestido blanco cuando lei el "haya paz" xDD pero no se sabe puede ser copiado, puede ser que no este copiado.. al final el que sabe es Martin10
-
xD disculpen pero es qu eme imagine a naveda con un vestido blanco cuando lei el "haya paz" xDD pero no se sabe puede ser copiado, puede ser que no este copiado.. al final el que sabe es Martin10
Un vestido blanco?? jajja
-
No me gusta nada por donde se esta llendo esta conversación, y solamente por esa "acusación" que me hizo G2K.
Bueno voy a ser corto: El tutorial lo hice %100 yo, hice el código en el dreamweaver, y no "copie y pegue" nada. De acá el que me cree bien y el que no, bueno no me interesa, YO TENGO LA CONCIENCIA BIEN LIMPIA ^^ y es lo que me interesa.
No respondo más respuestas dirigidas a este tema, me cansó.
Sobre el script. Me parece bien que cuestionen el código, pero lo que no me gustó es el "tono" con que lo dijo G2K.
Si no pongo ese elseif cada vez que el usuario active la petición ajax (con onblur) y no halla completado el campo de texto le va a devolver lo que dice el else. Yo preferí que cuando el input este vacio no de ninguna respuesta, pero también podría haber puestoque le diga que no completo el campo blablabla.
-
Ya pero si cambias el else de abajo del todo, a la posicion donde esta el elseif, y le pones:
elseif(!empty($user)) {
echo "<font color=\"green\">El usuario <b>". $user ."</b> esta disponible.</font>";
}
Te ahorras algunas lineas.
Saludos!
-
No me gusta nada por donde se esta llendo esta conversación, y solamente por esa "acusación" que me hizo G2K.
Bueno voy a ser corto: El tutorial lo hice %100 yo, hice el código en el dreamweaver, y no "copie y pegue" nada. De acá el que me cree bien y el que no, bueno no me interesa, YO TENGO LA CONCIENCIA BIEN LIMPIA ^^ y es lo que me interesa.
No respondo más respuestas dirigidas a este tema, me cansó.
Sobre el script. Me parece bien que cuestionen el código, pero lo que no me gustó es el "tono" con que lo dijo G2K.
Si no pongo ese elseif cada vez que el usuario active la petición ajax (con onblur) y no halla completado el campo de texto le va a devolver lo que dice el else. Yo preferí que cuando el input este vacio no de ninguna respuesta, pero también podría haber puestoque le diga que no completo el campo blablabla.
Mejor que me calle la boca, 1º lo hare por respeto a todos los usuarios de PHPeros cosa que tu no tienes ni sabes lo que es porque eres un mal educado, 2º que sepas que e hablado con varios usuarios de PHPeros por msn cuyo nick no voy a decir porque yo soy HONRADO, que es una palabra que no existe en tu diccionario, y opinan lo mismo que yo, así que dejas de querer tomarnos el pelo y ganarte amigos que te puedan hechar un cable o puedes seguir así y acabaras mal, tu mismo yo no voy a malgastar más tiempo por ti, la gente no es tonta y no cae en tus mentiras.
Yo de ti me lo paraba a pensar un rato.
-
G2K han dicho que dejeis el tema , procura hacer caso.
-
Que deje el tema, mira ahora voy a bloquear el post ya que va contra las normas de acreditación de codigos y segun lo que opine naveda borrare el post, porque naveda ya a pillado a más de uno haciendo lo mismo con tutoriales de otras Webs y a advertido que si no reconocian que le borraban el post, pues ale el mismo criterio.
La verdad que siento montar semejante alboroto y dejar mancha en PHPeros pero aquí hay unas normas y un respeto y quien las cumpla sera bien venido y sino que se vayan a otro lado.