Linea de Codigo

Los grupos de conversación de Facebook sobre lenguajes de programación en español están lanzados y rodando a la perfección. Me alegra mucho ver que la gente está interactuando e intercambiando preguntas, ideas, cursos, manuales,... Qué es lo que perseguíamos. Espero que siga así durante mucho tiempo.

En breve asignaremos administradores a los grupos, para que se pueda diversificar más la actividad y el control de los grupos.

Pero echemos un vistazo a las últimas conversaciones...

HTML5 en Español
https://www.facebook.com/groups/html5.es/
75 miembros

• HTML5 Rocks, un catalogo que contiene mucha información sobre recursos en HTML5.
• HTML5 y Accesibilidad, un buen artículo de Olga Carreras.
• Una Infografía que compara HTML5 y Flash para el desarrollo de VideoJuegos.
• Una buena chuleta sobre las posibilidades del Canvas en HTML5.
• ¿Alguien se ha pegado con el atributo designMode de HTML5?
• ¿Alguien ha probado Adobe Edge?
• Información sobre el centro de recursos HTML5 por Sourceforge y Microsoft.
• Un vídeo sobre el framework PhoneGap para el desarrollo de aplicaciones móviles.
• Foro para HTML5
• ¿Alguien ha probado Aptana?
• Un libro para aprender sobre HTML5 y la accesibilidad.
• ¿Alguien fue al evento CodeMotion?
• Cómo crear un banner con HTML5.
• Un grupo para charlar sobre HTML5 en Madrid.
• Uso del Canvas por Microsoft.
• HTML5 BoilerPlate, buenas prácticas y librerías sobre HTML5.
• Niveles de soporte del HTML5 en dispositivos móviles.
• BlueGriffon, una herramienta de desarrollo en HTML5 sobre Firefox.
• Un juego creado por Mozilla para demostrar el uso de HTML5 con Canvas y Websockets.
• Alguien ayuda a Freddy Flores a cómo crear una aplicación para Android.
• Ulises Esquivel busca ideas para elaborar un foro.
• Capitulo 4 del Manual HTML5 y CSS3 por Jorge Vargas V.
• Nos presentaron la web Desarrollandola.com con un montón de videotutoriales.
• Ayudar a Disan García para empezar desde 0 con HTML5.
• Freddy Flores nos pregunta sobre cómo hacer una venta automática en un website.
• Ayuda a Ulises Esquivel a maquetar elementos DIV
• Un tutorial para aprender CSS desde cero.
• Edita y prueba ejemplos directamente con HTML5 Playground.
• Una web de mucha utilidad. When Can I Use?
• Información sobre Canvas y WebGL.
• Ayuda a Ulises Esquivel a ordenar los post de su página.
• Streaming de Adobe CS6 y Creative Cloud.

Java en Español
https://www.facebook.com/groups/java.es/
90 miembros

• Charla sobre Java ME en Madrid
• ¿Qué Manual Java recomendáis para empezar?
• Libro Java 2, la Biblia del Java.
• Ayudar a Marcos Daniel Monge con Tutoriales para empezar con Java.
• Revisión del libro Introducción a la programación orientada a objetos.
• Ayuda a Mava Vargas con ejemplos sobre NetBeans y PostgreSQL
• Daniel Andrada nos plantea una duda sobre el uso de tablas en NetBeans con Swing
• Lo que viene en Java 9 y Java 10
• Rellena nuestra encuesta sobre si es buena idea eliminar los tipos de datos primitivos en Java.
• Descubriendo la declaración de argumentos variables en Java.
• Emmanuel Ramos nos pide una recomendación sobre un libro del framework Spring y nos pregunta sobre los métodos de notificación en los midlets.
• Ayuda a José Andrés con un problema de textfield y un scrollbar.
• Ayuda a Jose Cota para combinar radiobutton y combobox y para explicar métodos de ordenación por mezcla.
• El curso de Java SE 7 por Oracle.

Javascript en Español
https://www.facebook.com/groups/javascript.es/
66 miembros

• El imprescindible MDN - Mozilla Developer Network
• Contesta nuestra encuesta sobre si hay que aprender solo Javascript y ser un experto o jQuery es un gran complemento.
• Libro jQuery: The Write Less, Do More, Javascript Library
• Artículo para saber qué evento se ha producido.
• Edder Rodriguez comparte unos artículos para saber que plugins de jQuery se utilizan en una web y para saber qué versión de framework se utiliza.
• Artículo de Opera sobre el manejo de eventos.
• 6 librerías para desarrolladores Javascript.
• Conferencia Internacional sobre Javascript en Madrid el 6 y 7 de Julio.
• Vídeo de las herramientas de Firefox para desarrolladores
• Jose Eduardo nos pregunta sobre cómo eliminar la barra horizontal del navegador y el responsive design.

jQuery en Español
https://www.facebook.com/groups/jquery.es/
82 miembros

• Descargarnos la librería jQuery
• Artículo para crear un slider con jQuery
• jQuery TextExt Plugin, Fernando Sebastian nos comenta un plugin para los campos input.
• Joan Fuste comparte un artículo sobre formularios tabulados con animación.
• Como adaptar jQuery Mobile a los proyectos en Rails.
• Pablo Ruiz comparte la revisión del libro Aprende jQuery 1.3

CSS en Español
https://www.facebook.com/groups/css.es/
60 miembros

• El Test CSS3 y algunos de los resultados de nuestros miembros (1, 2, 3,...). Puedes añadir tus pruebas en el documento Soporte CSS3 por los navegadores.
• Artículo para poner varios fondos en CSS3.
• Publicados documentos de trabajo de la W3C sobre CSS Transforms y CSS Fragmentation Module 3.
• Se ha actualizado el documento de trabajo de CSS3 para la definición de los valores de las propiedades, así como del tipo de unidades que se pueden utilizar.
• ¿Cómo modifica el fondo la web Conversege? Impresionante!!!
• CSS Reset para HTML5
• Minix en LESS para CSS3

PHP en Español
https://www.facebook.com/groups/HypertextPreprocessor.es/
63 miembros

• Liberado PHP 5.4.0
• RelampagoPHP y sus videoconferencias sobre Responsive Design y HTML5.

XML en Español
https://www.facebook.com/groups/xml.es/
32 miembros

• Artículo sobre como construir tu primer XSLT.

SVG en Español
https://www.facebook.com/groups/svg.es/
21 miembros

• Artículo que explica como hacer un Hola Mundo en SVG
• ¿Alguna aplicación para hacer animaciones en SVG? Al estilo de Radi.

Una de las nuevas capacidades que encontramos dentro de HTML5 es la de definir un contenido editable. Es decir, nos permite insertar elementos dentro del documento web los cuales el usuario puede editar desde el navegador y modificar su contenido.

Lógicamente ampliando las capacidades ya existentes con el TEXTAREA para introducir texto. Así al poder crear contenido editable en HTML5 podremos estar cerca de tener un editor web (o diseñador web) de las páginas web o editores de texto con formato enriquecido.

La forma de crear contenido editable en HTML5 es muy sencilla. Lo primero que haremos será definir una capa de contenido DIV. Sobre dicha capa insertaremos texto.

 
<div id="micapa" style="border: thin solid;padding:10px;">
Inserta la pregunta que quieras hacernos...
</div>
 

Podemos observar que hemos dado un pequeño estilo a la capa agregandola un borde y un espaciado del contenido con respecto al borde.

Para convertir a la capa en editable y así poder crear contenido editbale nos bastará con añadir el atributo contentEditable y asignarle un valor de true. Ya que por defecto este atributo vendrá con un valor de false.

 
<div id="micapa" contentEditable="true" style="border: thin solid;padding:10px;">
Inserta la pregunta que quieras hacernos...
</div>
 

Simplemente con la inclusión de este contentEditable hemos conseguido crear contenido editable en HTML5. Ahora cuando carguemos la página en el navegador y pulsemos sobre el texto veremos como el navegador nos deja modificar el contenido de la capa.

Como siempre con la especificación HTML5 (al menos de momento), deberemos de tener cuidado con el soporte de los navegadores del atributo contentEditable, ya que nos podemos encontrar que alguna versión no lo soporte.

En el ejemplo de hoy vamos a ver como podemos codificar el efecto leer más texto con jQuery. La idea es tener un texto, del cual solo mostraremos su contenido inicial y un enlace que indique "leer más". Al pulsar sobre el enlace "leer más" se producirá el efecto leer más texto que consiste en mostrar el contenido completo del texto.

Seguro que habéis visto el efecto leer más texto en muchas web, como por ejemplo en los comentarios de YouTube.

Lo primero será poner el texto en nuestra página. El texto será completo y se encontrará dentro de una capa DIV.

 
<div class="comentario">
	Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.<br>
	Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.<br>
	Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper. Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.
</div>
 

Siempre que utilicemos jQuery es bueno el utilizar clases o indicadores para acceder a los elementos. En este caso hemos utilizado el id "comentario" para identificar claramente nuestro texto.

Ahora ya vamos con nuestro código jQuery, el cual colocaremos en la cabecera de nuestra página dentro del método .ready().

Acordaros que el método .ready() se ejecuta una vez que se ha cargado toda la página, asegurando así la consistencia de nuestro código a la hora de acceder a los elementos.

Lo primero que hacemos es establecer el número de caracteres que se previsualizarán y extraeremos la subcadena que representan del contenido del texto. El contenido nos lo dará el método .html() sobre la capa "comentario" y la subcadena la conseguimos mediante el método Javascript .substr().

var caracteresAMostrar = 300;
var contenido = $(".comentario").html();
 
if (contenido.length > caracteresAMostrar) {
  var resumen = contenido.substr(0, caracteresAMostrar);
  var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
}

En la variable resumen dejamos el resumen de texto a mostrar, mientras que en la variable todo dejamos el resto del contenido.

Ahora, con estos textos vamos a modificar la estructura de la página (si nos hubiesen dado esta estructura previa nos ahorraríamos estos pasos, pero hemos preferido partir de un texto completo).

En la nueva estructuración crearemos dentro del DIV el texto, un SPAN donde tendremos el resto del texto y otro SPAN con la frase Leer Más. Luego veremos que este texto lo modificamos dependiendo de si hay que "Leer más o leer menos".

var nuevocontenido = resumen + '<span class="complete">' + todo + '</span><br><span class="more">Leer mas...</span>';
$(".comentario").html(nuevocontenido);

El código jQuery de esta parte queda de la siguiente forma:

var caracteresAMostrar = 300;
var contenido = $(".comentario").html();
 
if (contenido.length > caracteresAMostrar) {
  var resumen = contenido.substr(0, caracteresAMostrar);
  var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
 
  var nuevocontenido = resumen + '<span class="complete">' + todo + '</span><br><span class="more">Leer mas...</span>';
   $(".comentario").html(nuevocontenido);
}

Ahora tenemos que codificar el efecto leer más texto en jQuery. Y este paso es sencillo. Ya que si pinchamos sobre "leer más" habrá que hacer visible la parte definida como "more" y poner un texto "leer menos". Y si pulsamos sobre "leer menos" realizaremos el efecto contrario, que será esconder "more" y poner el texto "leer más".

Como estamos hablando de un cambio de estado de un elemento. De nuestro elemento "more". Lo que haremos será apoyarnos en el método .toggle(), el cual efectua una acción u otra cada vez que pulsemos sobre el elemento.

El código jQuery quedará de la siguiente forma:

$(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
}, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
});

Vemos que utilizamos varios métodos de jQuery:

• .text(), nos permite cambiar el texto del elemento por "leer menos" o "leer más".
• .siblings(), nos permite acceder a los elementos que está en nuestra misma estructura del DOM, el id se lo pasamos por parámetro.
• .show(), muestra el contenido del elemento.
• .hide(), oculta el contenido del elemento.

Con esto ya tenemos todo nuestro código jQuery y el efecto leer más texto conseguido.

jQuery nos permite manejar de forma muy sencilla los formularios con un amplio conjunto de métodos. En este caso vamos a ver cómo podemos acceder a la lista de opciones seleccionadas de un combo y mostrarlas por pantalla utilizando la librería jQuery.

En primer lugar vamos a pintar el combo (esta vez va de fútbol):

 
<form id="myform">
<select id="equipos" multiple="multiple">
<option value="barça" selected="selected">Barça</option>
<option value="real madrid">Real Madrid</option>
<option value="atletico madrid">Atl&eacute;tico Madrid</option>
<option value="valencia">Valencia CF</option>
<option value="betis" selected="selected">Real Betis</option>
<option value="deportivo">Deportivo de la Coruña</option>
</select>
</form>
 

Si queremos que puedan existir varias opciones seleccionadas dentro del combo deberemos de utilizar el atributo multiple="multiple" dentro del select. De igual manera, si queremos prefijar una de las opciones deberemos de utilizar el atributo selected="selected".

Listaremos las opciones seleccionadas del combo cada vez que haya un cambio en dicho combo. Para ello vamos a manejar el método .change() de jQuery. En cada cambio ejecutaremos la función que le digamos al método .change().

$(document).ready(function(){
  $("#equipos").change(function(){
    ...
  });
});

Y ¿qué va a hacer nuestra función? Pues recorrer el elemento select. Pero no todo el elemento select, si no aquellas opciones que estén seleccionadas. Así que vamos a utilizar un selector. El selector será:

#equipos option:selected

Es decir, del combo o select 'equipos' elige aquellas opciones, u option, que estén seleccionadas, es decir 'selected'.

Ahora, de cada opción obtendremos su valor mediante el método .text()

$("#equipos option:selected").each(function() {
  texto += $(this).text() + " - ";
});

Ya solo nos quedará volcar el contenido en alguna capa de nuestra página. Para ello creamos un elemento DIV al que llamaremos 'resultado' y al que volcaremos los datos mediante:

$("#resultado").text(texto);

Solo nos queda un pequeño detalle. Y es que si hemos puesto campos seleccionados de antemano, si queremos que se ejecute nuestro método .change(), podemos simular el ejecutarlo mediante el método .trigger()

$("#equipos").trigger('change');

De esta manera tendremos la primera ejecución del .change(). El código entero nos quedará de la siguiente forma:

$(document).ready(function(){
  $("#equipos").change(function(){
 
    var texto = "Opciones Seleccionadas: ";
    $("#equipos option:selected").each(function() {
      texto += $(this).text() + " - ";
    });
 
    $("#resultado").text(texto);
 
  }).trigger('change');
});

Una de las mejores formas de maquetar nuestras web es utilizando capas (principalmente elementos DIV). Una vez que definamos la estructura de nuestro documento HTML mediante las capas podremos maquetarlo y darle estilo con CSS. Definir el ancho de una capa con CSS debería de ser una cosa, a priori sencilla. Pero veremos que alguna cosa que otra hay que tener en consideración.

Las estructura de nuestro documento HTML podría ser la siguiente:

 
<!-- Capa 1 -->
<div id="equipos">
<h2>Equipos</h2>
 
Los equipos que se han presentado son FC.Barcelona, Real Madrid, At. Madrid y Betis.
</div>
 
<!-- Capa 2 -->
<div id="goleadores">
<h2>Goleadores</h2>
 
Los goleadores de esta temporada son Villa, Diego Forlan, Messi y Cristiano Ronaldo.
</div>
 

Como podemos ver, tenemos dos capas (la de equipos de fútbol y la de goleadores). Una cosa importante es que hemos dado un ID a las capas. Ya que mediante ese ID vamos a dar un ancho a dichas capas.

Si queremos definir el ancho de una capa con CSS deberemos de utilizar el atributo width. Así nuestra hoja de estilos CSS quedará de la siguiente forma:

 
<style type="text/css">
#equipos{
  width:100px;
  background:red;
}
#goleadores {
  width:100px;
  backgorund:blue;
} 
</style>
 

Vemos que utilizamos los valores de los ID precedidos de una almohadilla (#) para dar el estilo CSS al elemento.

Hemos añadido un fondo a la capa, mediante el atributo background, con el fin de poder apreciar que hemos dado a las capas un ancho de 100px.

Inicialmente podríamos decir que ya tenemos resuelto nuestro problema y que era sencillo definir el ancho de una capa con CSS.

Veamos una captura de la imagen...

Bueno, viendo el resultado, quizás me asalten algunas dudas:

• El texto "Goleadores" se sale de la capa. ¿Cómo debería de quedar ajustado?
• Las capas están una debajo de otra. Yo pensaba que al definirlas un ancho, se situarían una detrás de otra.
• ...

De momento dejamos definido el ancho de las capas con CSS. En siguientes artículos iremos viendo como ajustar esos pequeños detalles.

Uno de los artículos más leidos, aunque no el que más, es el que explica cómo crear un Reloj en JavaScript. En dicho artículo se explica como poner un reloj dentro de un campo input de un formulario. Y claro, esto puede poner bastantes limitaciones en el diseño de nuestra página.

Es por ello que, en este artículo, explicamos como crear nuevamente el reloj, pero esta vez, su destino será una capa. Esto permite colocar la capa en cualquier parte de la página, facilitando el diseño de la misma.

Bueno pasamos a lo practico. Primeramente obtenemos la fecha y de la fecha mediante los métodos .getHours(), .getMinutes() y .getSeconds() obtenemos la hora, minutos y segundos. Recuerda que estos son los datos de la hora de tu maquina.

El código seria el siguiente:

var  dia = new Date();
var  hora = dia.getHours();
var  minutos = dia.getMinutes();
var  segundos = dia.getSeconds();

Posteriormente realizaremos una comprobación de que si el valor que tiene en un momento dado cualquiera de las variables anteriores esta entre 0 y 9, añadiremos un cero delante. Simplemente para que nos quede más mona la hora.

if ((segundos >= 0)&&(segundos <= 9)){
  segundos="0"+segundos;
}

Para visualizar la hora en el navegador crearemos una capa. En primer lugar definiremos el estilo que queramos darle a la capa en la cabecera de la página, es decir, dentro de las etiquetas <HEAD> y </HEAD>. Para definir el estilo utilizaremos las etiquetas <STYLE> y </STYLE> de la siguiente forma:

#capa_reloj {font:bold; color:yellow; background:blue; width:70px;}

En nuestro caso la capa va a tener el fondo azul y las letras amarillas.Pero se puede formatear la capa al gusto del consumidor.

Y segundo incluiremos nuestra capa dentro de la página mediante las etiquetas <DIV> y </DIV>:

 
<div id="capa_reloj"></div>
 

Deberemos de tener en cuenta que para modificar el contenido de la capa deberemos de utilizar la propiedad innerHTML, en el método en el que mostramos la información:

document.getElementById("capa_reloj").innerHTML = time;

Y la forma de ejecución es el mostrar la hora cada segundo mediante la función setTimeout(cadena,milisegundos), la cual ejecuta la cadena indicada pasados los milisegundos indicados. (En nuestro caso cada segundo = 1000 milisegundos).

window.setTimeout("mostrar()",1000);

También indicar que hay que empezar a ejecutarlo cuando se cargue la pagina, es por ello que utilizaremos el método onLoad(), para empezar a ejecutarlo, mediante setTimeout.

En unas pocas líneas vamos a ver lo sencillo que es repaginar utilizando jQuery y AJAX. El ejemplo que vamos a montar es el típico en el cual un servicio de datos nos devuelve mensajes, mientras que nosotros, en la parte cliente realizaremos repaginaciones mediante peticiones AJAX a ese servicio.

En primer lugar contaremos con un servicio de datos que daremos por construido, al que llamaremos datos.php. Este servicio puede recibir por parámetro el valor de la página de datos a mostrar. Siguiendo la siguiente sintaxis:

datos.php?pagina=1 //Nos devolverá la primera página
datos.php?pagina=5 //Nos devolverá la quinta página

En posteriores artículos entraremos en detalle de como construir esta página con PHP de forma sencilla. Pero de momento nos vamos a centrar en el desarrollo de la parte cliente con jQuery para realizar peticiones AJAX.

Lo primero será la estructura de la página. Esta tendrá una capa donde volcaremos los mensajes, y dos botones que nos permitirán el ir hacía delante y hacía detrás.

 
<div id="mensajes"></div>
 
<button id="anterior">Anterior</button> | <button id="siguiente">Siguiente</button> 

Vemos que no tiene nada de código Javascript, y es que este le inyectaremos de forma no intrusiva mediante jQuery.

La inicialización de jQuery, tan sencilla como una línea:

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

De forma general vamos a definir una variable llamada página, la cual representa la página de mensajes a visualizar:

var pagina=1;

La inicializamos a un valor de 1 para que esta sea la primera página a visualizar.

Lo siguiente será codificar las acciones de click sobre los botones. El método que nos permite capturar un click sobre un elemento es el método .click() de jQuery. La codificación de los botones será muy sencilla. Los pasos que seguirán serán.

1. Decrementar el valor de una variable general llamado página
2. Llamar a una función cargardatos(); la cual implementará las peticiones AJAX

El código quedará de la siguiente manera:

$("#anterior").click(function() {
  pagina--;
  cargardatos();
});
 
$("#siguiente").click(function() {
  pagina++;
  cargardatos();
});

Como nuestras peticiones AJAX no van a ser muy complejas la función cargardatos se apoyará en el método .get() el cual hace peticiones AJAX de tipo GET. Aunque la función .get() tiene varios parámetros (échale un vistazo a los parámetros de la función .get()) nosotros vamos a utilizar 2.

El primer parámetro indicará el origen de datos que nos devuelve el contenido. Es decir, datos.php. Como la URL a montar varía dependiendo del valor de la página en la que estemos, tenemos que apoyarnos en el valor de la variable global página que estabamos utilizando

"datos.php?pagina="+pagina;

El segundo parámetro de la función .get() es un función que recibe un parámetro data con los datos de la respuesta y cuyo contenido es las acciones que vamos a realizar sobre ellos. En nuestro caso el contenido lo vamos a añadir a la capa "mensajes". Apoyándonos en el método .html(), el cual incluirá ese contenido sobre la capa.

function(data){
  if (data != "") {
    $("#mensajes").html(data);
}

Así, el código completo de la función cargardatos() quedará de la siguiente forma:

function cargardatos(){
  $.get("datos.php?pagina="+pagina,
   function(data){
    if (data != "") {
     $("#mensajes").html(data);
    }
    }
  );
}

Unas pocas líneas y algo que parece tan complejo como repaginar con jQuery y AJAX... resuelto.

Las bondades del patrón AJAX son más que conocidas... La posibilidad de hacer peticiones de forma asíncrona que actualicen una parte de la página es una realidad de muchas webs. jQuery, como framework de JavaScript nos permite realizar esta tarea de forma sencilla, evitando codificar directamente la petición AJAX en JavaScript.

En este caso vamos a realizar una petición a una página para que nos devuelva un contenido, el cual incluiremos en una capa de nuestra página.

Así, lo primero será montar nuestra página HTML. Con su button y su div.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Petición AJAX con jQuery</title>
</head>
<body>
<h1>Petición AJAX con jQuery</h1>
<div id="mensaje"></div>
 
<button id="cargar">Cargar</button>
 
</body>
</html>

Lo siguiente será inicializar jQuery y empezar a generar el código no intrusivo. Cargamos la librería jQuery mediante la etiqueta SCRIPT.

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

Una vez configurado todo... vamos a resolver el tema en cuestión. Lo primero será capturar el onClick sobre el botón. Para ello, sobre el ID cargar asociamos la función click().

<script type="text/javascript">
$(document).ready(function(){
 $("#cargar").click(function(){
    // Petición AJAX 
 });
 
});
</script>

Para hacer la petición AJAX nos apoyaremos en la función .get(url,[data],[callback],[type]). Esta función es muy sencilla y sus parámetros se descomponen en:

• url, es la URL que contendrá el fichero que nos devuelva los datos.
• data, son los datos a enviar a la URl de petición
• callback, es el método que se ejecutará cuando se realice la petición
• type, tipo de datos que se devolverán desde el servidor: text, xml, html, json,...

Así la petición AJAX será:

$.get("http://lineadecodigo.com/samples/datos.php", function(data){
  $("#mensaje").html(data);
});

En ella se puede apreciar varias cosas. La primera que datos.php es el fichero que devuelve los datos (no entraremos en detalle de como se compone, pero básicamente devuelve código HTML). La segunda es que la función de callback recibe como parámetro los datos devueltos por el servidor... dentro de esta función lo que estamos haciendo es añadir estos datos a la capa mediante el método .html()

Ahora solo nos queda el explotar las posibilidades del método .get() para dar potencia a nuestra web mediante peticiones AJAX con jQuery.

Una de las cosas que nos permite AJAX es realizar peticiones asíncronas, las cuales solo recarguen una parte de la página. Esto nos da la posibilidad de dar la sensación de velocidad de cara al usuario. Un caso ejemplo es el de la repaginación de datos. Es decir, tener una lista de elementos dentro de las páginas e ir avanzando o retrocediendo en el listado. Buscando no afectar al resto de la página.

En el ejemplo repaginar datos con AJAX nos vamos a centrar en la parte cliente de petición (en nuestra página HTML). No entraremos en detalle de la construcción de la parte servidor. Si bien, dejo pendiente el escribir un artículo completo que utilice AJAX, PHP y acceso a datos MySQL. Lo cual nos dejará ver el proceso entero de una forma más detallada.

Empezaremos definiendo la página del servidor que nos devuelva los datos. Esta puede estar construida en cualquier tecnología del lado del servidor. Véase ASP, PHP, JSP,... En nuestro caso vamos a crear una pequeña página en JSP.

Esta página recibe un parámetro denominado "página". Según el valor que le llegue como parámetro devolverá una lista HTML u otra. La URL será algo como lo siguiente:

http://www.miservidor.com/datos.jsp?pagina=2

Aunque no quiero entrar en detalle del código JSP os adjunto un pequeño extracto del código. De forma orientativa:

 
<%
String[] provincias = {"Álava","Albacete","Alicante","Almería",...,"Zamora","Zaragoza"};
 
int pagina = Integer.valueOf(request.getParameter("pagina"));
pagina=(pagina-1)*10;
 
out.println("&lt;ul&gt;");
for (int x=0;x<10;x++)
	out.println("
<li>" + provincias[pagina+x] + "</li>
 
");	
 
out.println("&lt;/ul&gt;");
 
%>
 

Comentándolo muy por encima, recupera el valor del parámetro utilizando el método .getParameter() y lo utiliza para acceder a un array de String. A partir de ese elemento del array devuelve 10 elementos en una lista HTML utilizando las etiquetas UL y LI.

Pero centrémonos en la parte cliente. Lo primero será definir la página. La página tendrá una capa DIV donde iremos mostrando el contenido. Es importante darle un ID a la capa, ya que nuestro código JavaScript accederá a ella para ir modificando el contenido de forma asíncrona.

Debajo de la capa pondremos 5 enlaces que llamen a una función JavaScript paginar. Esta función será la que realice la petición AJAX y cargue el contenido en la capa DIV.

Veamos este código:

 
<div id="datos"></div>
 
<a href="#" onclick="paginar(1);" title="paginar">1</a> |
<a href="#" onclick="paginar(2);" title="paginar">2</a> |
<a href="#" onclick="paginar(3);" title="paginar">3</a> |
<a href="#" onclick="paginar(4);" title="paginar">4</a> |
<a href="#" onclick="paginar(5);" title="paginar">5</a>
 

La función JavaScript paginar será la que realice todo el trabajo. Como vemos esta función recibe un parámetro que indica el número de página sobre el que queremos posicionarnos.

 
function paginar(pagina) {...}
 

Lo primero que tiene que realizar esta función es cargar el objeto que nos permita realizar las peticiones asíncronas a modo AJAX. Este objeto es XMLHttpRequest.

Aunque el objeto XMLHttpRequest es un objeto ya estandarizado y definido por la W3C hay ciertos navegadores (como el Internet Explorer) que siguen sin implementarlo. En su defecto utilizan el objeto Microsoft.XMLHTTP. Este viene a hacer lo mismo, o algo parecido, pero con otro nombre.

Es por ello que la instancia del objeto XMLHttpRequest se complica un poco. Quedaría de la siguiente manera:

 
 // Llama objeto XMLHttpRequest
 if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();    
 
 // Si no funciona intenta utiliar el objeto IE/Windows ActiveX
 } else if (window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
 }
 

La variable que tiene la instancia es req. Esta variable será la que represente la conexión con el servicio de datos

El siguiente paso será establecer la conexión. Para ello seguimos tres pasos:

Primero indicamos que función JavaScript es la que va a procesar la respuesta del servidor. Esto lo hacemos mediante el evento .onreadystatechange de la petición. En nuestro caso será la función JavaScript "procesarRespuesta"

 
req.onreadystatechange = procesarRespuesta;
 

Segundo indicamos la URL a la cual queremos realizar la petición. Para componer la URL concatenamos la URL del servicio de datos con el número de página recibido como parámetro.

 
url = 'http://www.miservidor.com/datos.jsp?pagina=' + pagina;
req.open("GET",url,true);
 

El método .open es el que utilizamos para indicar la URL. Este tiene varios parámetros: tipo de petición (GET,POST o PUT), la URL y si queremos que sea síncrono -false- o asíncrono -false- como tercer parametro.

Tercero y último realizamos la petición. Para ello nos apoyamos en el método .send()

 
req.send(null);
 

Veamos como es la función repaginar entera:

 
function paginar(pagina) {
 
 req = false;
 
 // Llama objeto XMLHttpRequest
 if (window.XMLHttpRequest) {
   req = new XMLHttpRequest();    
 
 // Si no funciona intenta utiliar el objeto IE/Windows ActiveX
 } else if (window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
 }
 
 if(req!=null){
   req.onreadystatechange = procesarRespuesta;
   url = 'datos.jsp?pagina=' + pagina;
   req.open("GET",url,true);
   req.send(null);
 }
}
 

Ahora nos tenemos que centrar en la función JavaScript "procesarRespuesta". Esta función es la que recibirá los datos del servidor y los colocará en la capa.
Los datos de la respuesta vienen en la propiedad .responseText de la petición (es decir, del objeto req). Es por ello que simplemente tenemos que pegarlos en la capa.

 
function procesarRespuesta(){
 
	contenido = document.getElementById('datos');
	contenido.innerHTML="Cargando los datos...";
 
	if (req.readyState==4 && req.status==200) {
   		//mostrar resultados en esta capa
   		contenido.innerHTML = req.responseText;
  }
 
}
 

Para poder poner los datos en la capa DIV tenemos que haber accedido a ella mediante su ID y la función .getElementById(). Para modificar el contenido de una capa nos apoyamos en la propiedad .innerHTML. Esta propiedad será sobre la que dejemos el contenido de responseText.

Y ya está. Con esto hemos construido una repaginación de datos con AJAX de una forma muy sencilla.

Como último hay que destacar que tanto el archivo cliente como el servicio de datos tienen que estar en el mismo dominio. Debido a las políticas de seguridad de JavaScript.

Ya están lejos los tiempos dónde un site de Internet estaba compuesto solo por páginas estáticas HTML. Ahora la mayoría se componen en los servidores, mezclando información, ficheros, datos almacenados,... Si bien podemos tener la necesidad de tener dinamismo en la carga de datos de la parte cliente. Para ello, jQuery nos dará la capacidad de cargar un fichero de forma dinámica.

Lo primero que tenemos que hacer es crear un fichero HTML de test. Este lo llamaremos test.html. Ahora pasamos a crear la página que nos permite cargar un fichero con jQuery. En esta, lo primero que vamos a hacer es cargar la librería jQuery.

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

Como en la mayoría de las ocasiones utilizamos la función ready para esperar que se cargue la página. Dentro de la función ready será donde insertemos nuestro código jQuery.

$(document).ready(function(){
 $("#carga").click(function() {
	// Código
   });
});

Vemos que el código que nos va a permitir cargar un fichero con jQuery se lo asociaremos al evento click de un elemento que llevará el ID carga. Por ejemplo, pondremos un botón...

<button id="carga">Cargar fichero</button>

Además añadiremos una capa, a la cual daremos el ID texto, sobre la cual cargaremos el fichero HTML.

 
<div id="texto"></div>
 

Ya solo nos quedará cargar el fichero. Para ello utilizamos la función .load(), a la cual pasamos el nombre del fichero a cargar. En nuestro caso el fichero test.html

 $("#carga").click(function() {
	 $("div#texto").load("test.html");
   });