Introducción a JQuery y AJAX

Introducción a JQuery

En el curso de Programación Web con JAVA, queremos realizar en nuestras páginas llamadas a JSP o Servlets de manera asíncrona, o actualizar información de la página mientras el usuario está leyendo la página.

Materiales

https://www.dropbox.com/s/l94xcnzgb8hdcrk/example-jdbc-derby.zip
https://www.dropbox.com/s/depy2icizkhj8lv/tutorial-jquery-css.zip

Objetivo:

Veremos como hacer para invocar una petición HTTP a nuestros recursos, y como modificar nuestro HTML de acuerdo a esos eventos.

Definición de AJAX

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una combinación de cuatro tecnologías ya existentes:

• XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.
• Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.
• El objeto XMLHttpRequest para intercambiar datos de forma asíncrona con el servidor web. En algunos frameworks y en algunas situaciones concretas, se usa un objetoiframe en lugar del XMLHttpRequest para realizar dichos intercambios. PHP es un lenguaje de programación de uso general de script del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico también utilizado en el método Ajax.
• XML es el formato usado generalmente para la transferencia de datos solicitados al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.

Fuente: Wikipedia

Por qué utilizar JQuery?

Porque es una librería madura que nos facilitará el trabajo de manipular nuestro HTML.

Que necesitamos para utilizar JQuery?

Descargar la librería JavaScript, y utilizar en nuestras páginas.

Descargar de http://jquery.com/download/

Leer el API: http://api.jquery.com/

Al cargar la Librería JQuery, ésta nos crea una función con nombre de Variable jQuery o $ (alias), a quién nosotros le pasamos como parámetro un "Selector", él nos devuelve un resultado para ese selector y nosotros aplicamos una función a ese resultado.

Seleccionando un Elemento por ID

1	$( "#myId" ); // Note IDs must be unique per page.

Seleccionando elementos por clase CSS

1	$( ".myClass" );

Seleccionando elementos que tienen atributo con valor

1	$( "input[name='first_name']" ); // Beware, this can be very slow in older browsers

Seleccionando elementos por patrón 

1	$( "#contents ul.people li" );

JQuery también agiliza el desarrollo y el consumo de librerías de tipo UI o Utilitarios.

Que tipo de Documentos podemos utilizar para transportar con AJAX

Se puede transportar XML, Texto Plano, Java Script a ser ejecutado y JSON.