Bien muchos ya seremos algo familiares con la tecnica AJAX, para establecer una comunicación servidor-cliente de manera asincrona. En este articulo veremos como realizar un ejemplo de petición AJAX desde javascript a una aplicación PHP utilizando el metodo jQuery.ajax(). También recordemos que la ventaja de utilizar jQuery es que no tenemos que preocuparnos por la compatibilidad con los distintos navegadores, puesto que jquery maneja los casos y excepciones correctamente para ejecutar el codigo en los navegadores que existen actualmente.
El uso basico es el siguiente:
jQuery.ajax({
url:'colocar la url de la aplicacion web a enviar peticion',
type:'get o post ',
data:{
/*Aqui colocar los nombres de datos a enviar al servidor*/
}
}).done(
function(resp)/*resp sera la respuesta obtenida desde el servidor*/
{
/*Codigo*/
}
);
Basicamente lo que estamos haciendo es especificar en el metodo .ajax() una URL a la que vamos a enviar información, el metodo que puede ser ‘get’ o ‘post’ y datos a enviar, del mismo modo la funcion .done() evalua un codigo nuestro una vez que se ha obtenido una respuesta del servidor. El parametro resp dentro de la funcion anonima en este metodo done() representa el valor de dicha respuesta.
Veamos el siguiente ejemplo. Enviaremos un numero desde jquery a una aplicación PHP, la aplicación del servidor(php) respondera con una respuesta dependiendo del valor del numero.
Ejemplo:
El PHP:
<?php
$data = $_GET['number'];
if($data >=10)
echo "Numero ".$data;
else
echo "Cualquier otro numero :(";
?>
Archivo html con el javascript:
<!DOCTYE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
/*AJAX*/
jQuery.ajax({
url:'http://localhost/php/test.php',
type:'get',
data:{
number:'15',
informacion:10,
data:'hola'
}
}).done(
function(resp)
{
alert(resp);
}
);
</script>
</head>
</html>
Explicación en Video:
