Existe una parte del mercado que desea agregar mayor funcionalidad a sus aplicaciones Web por medio del cliente Web pero sin necesidad de usar Flash, Applets de Java, entre otras tecnologías.
Normalmente los desarrolladores han venido trabajando aplicaciones Web utilizando HTML, JavaScript y PHP (o alguna tecnología de servidor similar como JAVA, c#, etc.)
El problema a lo mencionado anteriormente es que los clientes necesitan datos nuevos del servidor y para esto se deben solicitar y recargar nuestra página interrumpiendo la actividad del usuario. El recargar la página es un problema en la actualidad y aquí entra a tallar AJAX o jQUERY.
NOTA: Empezaré hablando de AJAX, por así decirlo es la tecnología que arranca esto.
AJAX
Tecnologías que conforman AJAX
Las tecnologías que conforman AJAX están ya implementadas en todos los navegadores modernos como: Mozilla Firefox, Internet Explorer, Opera, Chrome. Así que no es necesario instalar ningún módulo extra en el cliente para ejecutar un sitio Web con AJAX.
Ahora describiré cada una:
JavaScript: Las aplicaciones AJAX se se deben escribir con este lenguaje de programación por lo que es la tecnología esencial de AJAX que permite dotar de funcionalidades al cliente. Se hará uso intensivo del DOM para manipular partes de la página.
Document Object Model (DOM): es esencialmente una interfaz de programación de aplicaciones para acceder, añadir y cambiar dinámicamente contenido estructurado en documentos HTML y XML con JavaScript.
El objeto XMLHttpRequest: Permite acceder al servidor de manera asíncrona mediante JavaScript de manera que el usuario puede seguir trabajando mientras la acción se realiza en segundo plano.
XML: Es el tipo de documento utilizado generalmente por la aplicación del lado del servidor usada principalmente para enviar una serie de datos de forma estructurada al cliente.
HTML y CSS: La primera tecnología se basa en la utilización de marcas para construir páginas Web y la segunda se encarga de mejorar la presentación.
Comunicación Cliente-Servidor
El script en el cliente que accede al servidor (utilizando el objeto XMLHttpRequest) puede utilizar parejas nombre-valor utilizando GET o POST.
El servidor haciendo uso de una tecnología de servidor (J2EE, ASP.NET o PHP) envía de vuelta la respuesta vía HTTP. Esta respuesta estará en un formato que será interpretado por el código JavaScript del cliente. Los formatos recomendados son XML o Texto.
Ejemplo
HTML
JavaScript y AJAX (archivo funciones.js)
Lenguaje de servidor- PHP (archivo Servidor.php)
Visualización en el navegador
Explicación del código
1) Creación del objeto XMLHttpRequest: El primer paso en nuestra aplicación era crear el objeto XMLHttpRequest.
2) Preparación de la petición: El siguiente paso es preparar el objeto para la realización de la petición, operación que se realiza por medio del método open().
El método open() se encuentra sobrecargado, lo que significa que tiene 4 versiones, teniendo la en la última versión la más completa la cual contempla 5 parámetros.
3) Función de retrollamada: Cuando la petición que se realiza al servidor es de modo asíncrono, es necesario indicarle al objeto XMLHttpRequest que función se debe encargarse del procesamiento de la respuesta cuando ésta esté disponible en el cliente.
La propiedad onreadystatechange es la responsable de la tarea mencionada anteriormente.
Esta propiedad es del tipo
EventListener (escucha ante un evento), lo que significa que debe contener la definición de una función manejadora de evento.
El evento que genera la llamada a la función definida por onreadystatechange es el evento cambio de estado (incluida en la propiedad). Este evento se produce varias veces desde el momento en se envía la petición hasta que se recibe la respuesta en el cliente.
4) Estado de la petición: El evento cambio de estado se produce varias veces por lo que necesitamos una función que compruebe el estado de la petición en curso, tarea que puede realizarse consultando la propiedad de sólo lectura readyState del objeto XMLHttpRequest dentro de la función de retrollamada.
Los valores que puede tomar readyState durante el ciclo de una llamada AJAX son:
5) Envío de la petición: Una vez configurados los parámetros que afectan a la petición procederemos a su envío mediante el método send() del objeto XMLHttpRequest el cual tiene 3 versiones.
Beneficios de utilizar AJAX
- Permite que nuestras aplicaciones Web sean más interactivas y responda mejor a las acciones del usuario.
- Fomenta el desarrollo de patrones que evitan que los desarrolladores no tengan que reinventar la rueda para realizar tareas rutinarias.
- Hace uso de tecnologías existentes.
- Hace uso de la habilidades de los desarrolladores.
- Se integra perfectamente con las funcionalidades que proporcionan los navegadores Web.
Problemas de utilizar AJAX
- No se pueden guardar el estado de páginas con AJAX a la lista de páginas favoritas del navegador.
- Puede ser que los buscadores no indexen todas las partes de un sitio Web que utiliza AJAX.
- Pulsar el botón atrás de navegador no produce el mismo resultado que en una página Web clásica.
- Si el navegador Web tiene desactivado JavaScript, inhabilita el funcionamiento de AJAX.
JQUERY
jQUERY es un biblioteca JavaScript que:
- Simplifica la forma de interactuar con documentos HTML.
- Manipula el DOM.
- Maneja eventos
- Desarrolla animaciones.
- Agregar interacción con la técnica AJAX.
jQuery es software libre y de código abierto y tienen muchas funcionalidades las cuales logran resultados notables en menos tiempo y espacio de código.
Características
- Selección, interacción y modificación del DOM.
- Manipulación de CSS.
- Manipulación de eventos.
- Desarrollo de efectos y animaciones.
- Uso de la técnica AJAX.
- Soporta extensiones.
- No pesa más de 35kb (versión de producción).
- Funciona en múltiples navegadores.
- Permite crear plugins.
Instalación de JQUERY
1) Descargar jQUERY de http://jquery.com
2) Incoporar el archivo jquery-x.x.x.js en tu sitio Web como cualquier otro archivo JavaScript.
Iniciando JQUERY
Antes de proceder a realizar una acción con jQUERY debemos percatarnos que el documento esté listo. Para ello usamos $(document).ready();
Selección de elementos
Para seleccionar elementos HTML se hace de la siguiente forma
Algunos eventos JQUERY
Ejemplos
HTML + JQUERY (evento click)
Resultado
HTML + JQUERY
Resultado
AJAX en JQUERY
JQUERY trae incorporado un módulo de AJAX, el cual hace uso de los métodos GET y POST.
Ejemplo
HTML + JQUERY
Lenguaje de Servidor PHP (archivo Control.php)
Espero les haya servido mucho este post para los que recien inician en estas tecnologías les puede ser muy útil.
Hasta la próxima su amigo Carlos Z.
