Alternativas Web - El arte de la programación Web

Como se ha mencionado en entradas anteriores, las aplicaciones AJAX (Asynchronous JavaScript and XML) han incrementado de manera significativa en Internet y son capaces de enviar peticiones al servidor o un código sin tener que recargar la página.

Para aquellos que manejen lenguajes de programación de ServerSide como php, se les hará muy simple aprender AJAX con esta increíble biblioteca openSource llamada jQuery.

Una de las desventajas que teníamos con AJAX por sí mismo era la compatiblidad con diferentes Browsers (en especial Internet Explorer) pero con jQuery nos olvidamos de los problemas de compatibilidad y nos adentramos a crear un código concreto.

Lo que hace jQuery

1. Gracias a sus selectores $(), nos permite seleccionar cualquier parte de nuestro documento HTML e interactuar con el mismo. De esa maner podremos cambiar el estilo visual de alguna parte ya que cuenta con la misma lógica que las hojas de estilo CSS.
2. Realizar peticiones AJAX mediante eventos de Javascript, es decir, responder a las interacciones de los usuarios mediante un drag por ejemplo.
3. Obtener información y editar información del servidor sin recargar la página. (Como un buscador que se autocomplete por ejemplo)
4. Manejar eventos javascript de una forma dinámica y fácil
5. Agregar animaciones a nuestras páginas mediante el uso de muchas librerías y plugins.

Descargando jQuery

Mediante este enlace podremos accesar a la página de descargas de jQuery el cuál nos ofrecerá la última version.

Una vez descargado tendremos un archivo javaScript (.js), lo agregamos al directorio de nuestro proyecto mediante

<script type='text/javascript' src='EL_DIRECTORIO/jquery.js'></script>

Y listo, ya tenemos acceso a jQuery

Nuestro primer documento jQuery

Para este ejemplo, realizaremos un link que al hacer click nos regrese un mensaje del servidor. Para eso necesitamos establecer una division donde jQuery regresará los datos y el link mediante la siguiente forma:

La División Resultados

 
<div id='divResultados'></div>
 

Notemos que es muy importante el id de la división ya que de esta forma jQuery lo identificará

El link

<a id='elLink' href='#'>Yo soy el link</a>

De igual forma, necesitamos el id y el href como # ya que no cambiará de página

Paso por paso haciendo nuestro jQuery

Paso 1

Creamos un script justo debajo de donde incluimos jQuery

<script type='text/javascript'></script>

Paso 2

Ahora vamos a decirle que es un documento jQuery mediante la función $(); cuando el docuemnto esté listo, se va a ejecutar la accion entonces ponemos function () {} sin definirla. De la siguiente manera:

$(document).ready(function(){});  // cuando el documento esté listo haz..

Paso 3

Ahora definimos la acción que se va a realizar. La función $(); , selecciona cualquier elemento del documento, así que le vamos a decir que queremos seleccionar el link: $('#elLink'); nótese que el #(signo de gato) es utilizado para seleccionar divisiones.

$(document).ready(function(){
$('#elLink').click(function(){}); // cuando se haga click en el link
});  // cuando el documento esté listo haz...

Paso 4

Ok ahora tenemos que deshabilitar el link mediante un return false; y mandar una petición get al servidor. Los parámetros de la función $.get(); son:

1. El nombre del documento a agarrar (en este ejemplo será a.php)
2. Las variables a mandar
3. La función a ejecutar después, es decir, regresar los resultados mediante el parámetro data

$(document).ready(function(){
$('#elLink').click(function(){
$.get('a.php', '', function(data){}); // envía un get a la página a.php
return false; // no recargues página
}); // cuando se haga click en el link
});  // cuando el documento esté listo haz...

Paso 5

Ahora solamente falta decirle que rellene los resultados obtenidos de a.php y los integre a la división divResultados, ésto se hará mediante la función de jQuery html la cuál inserta el resultado en alguna division

$(document).ready(function(){
$('#elLink').click(function(){
$.get('a.php', '', function(data){
$('#divResultados').html(data); // LLena los resultados con el texto emitido por el php</strong>
}); // envía un get a la página a.php
return false; // no recargues página
}); // cuando se haga click en el link
});  // cuando el documento esté listo haz...

Si tienes alguna duda del post, no dudes en dejar un comentario. Asímismo si tienes algún problema a la hora de escribir tu código describe tu problema para que te ayude a solucionarlo.