Ejemplo Básico de Ajax (usando GET)

16 abril, 2013
Jhonnyf

Es es un ejemplo bastante básico de ajax, en donde vamos a obtener una breve descripción de los meses con solo darle el valor numero del mes, este ejemplo se pudo haber hecho con base de datos pero para efectos de tutorial usaré un archivo que responderá con un simple mensaje.

para Ajax solo se necesitan 2 Funciones, una que inicia el proceso y/o envia la solicitud y otra que cuando se recepcione los datos haga una accion especifica, siempre la función de “accion” será indicada en la función que “inicia”. si deseas saber como hacerlo con jQuery este mismo tutorial aqui el enlace

Lo primero que necesitamos es una pagina que nos responda, para el tutorial será meses.php?num=x  donde X será el numero del mes que queremos consultar:

Ahora el Archivo AJAX que hará la consulta puede ser un simple HTML, pero si debe tener las 2 funciones de javascript que mencioné al inicio, puede ir dentro del mismo html o en un .js aparte, en mi caso haré una tercera función para que en caso el ActiveXObject para el Ajax no esté disponible, se usará el de javascript.

Antes de pasar al HTML principal voy a explicar las lineas de las funciones javacript que se usarán para nuestro ejemplo de AJAX

esas serian las funciones que ya debemos conoces y HTML que va a manerar y armar todo seria:

Hecho esto podemos poner un numero del 1 al 12 en el cuadro de texto y al pulsar el boton “Consultar”, llamará a la funcion que “inicia” el Ajax dandole como parametro el numero del mes, esta función ya se encarga de llamar a la segunda función cuando se recibe una respuesta que llenará el contenido del div resultado

Puedes verlo en funcionamiento aqui: http://www.elcodigofuente.com/ejemplos/ajax.php y descargar el archivo ejemplo aqui:

Archivos adjuntos

12 Comentarios. Dejar nuevo

Consulta… y esto funciona si la pagina “meses.php” es una consulta a mysql?

saludos.

Responder

Mis Felicitaciones maestro gracias me ha servido de mucho feliz día

Responder

Muy bien redactado, me sirvio bastante gracias n.n

Responder

Tengo una pregunta, por que en link del ejemplo que pones como quedaria el codigo, al momento de ver el source, esta tiene otros metodos en el (javascript)?? por que varia??

Responder

Disculpa es que vine del ejemplo de jQuery, y deje abierto el ejemplo de jQuery y vi ese source, asi que todo esta bien 😉

Responder
Esteban Herrera
31 enero, 2014 11:10 AM

Muchas Gracias!!! Me ha quedado clrisima tu explicación…

Responder

Yo creo que hay ejemplos mucho más basicos que este. Para una persona que no entiende nada de ajax es conveniente que se haga un ejemplo donde solamente se quiere mostrar un valor o cargar datos en un listbox y no un ejemplo con 150 lineas de codigo como este. Me parece a mi.
Igual está muy bien el ejemplo.

Responder

Genial, gracias, muy claro y al grano 🙂

Responder

Gracias muy util. sencillo y practico, pero potente para avanzar en otras aplicaciones.

Responder

Gracias, básico… pero concreto…

Responder
Facundo Cuntin
22 julio, 2014 5:03 PM

Si le agregan esta linea al final del código meses.php si ingresan un numero que no sea del 1 al 12 o una letra les avisa. se que es una pavada.. pero sirve de referencia.

else
echo ” Ingrese un numero del 01 al 12″;

Responder

El mejor ejemplo que pude encontrar muchas gracias

Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *