Ajax con PHP y JQuery
March 11th, 2008 | by necudeco |Me invitaron para dar una clase de ajax en mi Universidad, lamentablemente se cruzo con el inicio de la semana de cachimbos ( para los ajenos a Sistemas - UNT, la semana de cachimbos es aquella en la que con o sin el consentimiento de los docentes se suspende toda actividad academica y se procede a instalar “legalmente” numerosos juegos en red para las competiciones
)
Bueno y como no tenia nada acerca de lo cual escribir, decidi exponer un pequeño resumen de lo que hubiera tratado la clase.
AJAX, se puede realizar con cualquier lenguaje de programacion de lado del servidor. Esto es que no es necesario PHP, podria haber sido con ASP.NET, python, ruby, perl, …, y tambien el omnipresente assembler.
Lo que se pretende lograr al usar AJAX, es hacer consultas al servidor de tal manera que podamos presentar la nueva informacion sin tener que refrescar la pagina completa.
Presentar nueva informacion de la manera tradicional, requeria realizar la transferencia completa de la pagina, con una mayor espera por parte del usuario y un mayor gasto en el consumo de la red. Utilizando Ajax, esta operacion se reduce unicamente a transferir la nueva informacion y luego a realizar un procesamiento en el navegador del usuario para incrustar esta informacion en la pagina actual.
Vamos a realizar varios ejemplos del uso de ajax, y poco a poco vamos a irles subiendo la dificultad:
Ejemplo 1:
Tenemos una pagina de registro y queremos verificar si el nombre de usuario seleccionado esta disponible.
Para esto tenemos una pagina php, que se encarga de mostrarnos un mensaje dependiendo del nombre enviado como parametro.
<?php
$nombre = $_GET["nombre"];
if ( estaenbasedatos($nombre) )
echo '<p style="color:red;">El nombre esta siendo utilizado</p>';
else
echo '<p style="color:blue;">El nombre esta disponible</p>';
?>
Y nuesto codigo en jquery quedaria de la siguiente manera:
$(document).ready(function()
{
$("input#verificarnombre").click(function()
{
$.get("verificar.php",{nombre:$("input#nombre").val()},function(data){
$("div#mensaje").html(data);
});
});
});


