AJAX y JQUERY

• Qué significan las siglas 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).
  
• para que sirve AJAX?
  
  se hace posible realizar peticiones al servidor y obtener respuesta de este en segundo plano (sin necesidad de recargar la página web completa) y usar esos datos para, a través de JavaScript, modificar los contenidos de la página creando efectos dinámicos y rápidos.
  
  
  
• Ventajas y desventajas de AJAX
  
  Sus ventajas son:
  • Mejora la experiencia del usuario
  • Puede ser utilizada en cualquier plataforma y navegador
  • Menor transferencia de datos cliente/servidor
  • Optimización de recursos (tiempo de operaciones)
  • Portabilidad y usabilidad (permite realizar una petición de datos al servidor y recibirla sin necesidad de cargar la página entera)
  Sus desventajas son:
  • JavaScript debe estar activado en el navegador web para funcionar
  • Utilizar AJAX preferentemente en formularios de contacto, validación de correo electrónico y contraseñas para no afectar el posicionamiento web (SEO)
  • Tiempos de respuesta del servidor en momentos determinados
  • Tiempo de desarrollo (es necesario tener conocimiento medio/alto de las tecnologías que hacen parte de AJAX)
  • Algunas funciones a las que estamos acostumbrados en la navegación web pueden no funcionar como esperamos. Por ejemplo, el botón de atrás, guardar marcador o actualizar la página web en cualquier momento.
  
  
  
• Navegadores que soportan esta tecnología.
  
  
  
• Qué es y para que sirve jQuery?
  
  es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
  
  jQuery nos permite agregar efectos y funcionalidades complejas a nuestro sitio web, como por ejemplo: galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, hacer aparecer y desaparecer elementos en nuestra página y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la programación.
  
  
• Ventajas y desventajas de jQuery?
  
  

  Las ventajas de jQuery

  La ventaja principal de jQuery es que es mucho más fácil que sus competidores. Usted puede agregar plugins fácilmente, traduciéndose esto en un ahorro substancial de tiempo y esfuerzo. De hecho, una de las principales razones por la cual Resig y su equipo crearon jQuery fue para ganar tiempo (en el mundo de desarrollo web, tiempo importa mucho).
  La licencia open source de jQuery permite que la librería siempre cuente con soporte constante y rápido, publicándose actualizaciones de manera constante. La comunidad jQuery es activa y sumamente trabajadora.
  Otra ventaja de jQuery sobre sus competidores como Flash y puro CSS es su excelente integración con AJAX.
  

  En resumen:

  • jQuery es flexible y rápido para el desarrollo web
  • Viene con licencia MIT y es Open Source
  • Tiene una excelente comunidad de soporte
  • Tiene Plugins
  • Bugs son resueltos rápidamente
  • Excelente integración con AJAX

  Las desventajas de jQuery

  Una de las principales desventajas de jQuery es la gran cantidad de versiones publicadas en el corto tiempo. No importa si usted está corriendo la última versión de jQuery, usted tendrá que hostear la librería usted mismo (y actualizarla constantemente), o descargar la librería desde Google (atractivo, pero puede traer problemas de incompatibilidad con el código).
  Además del problema de las versiones, otras desventajas que podemos mencionar:
  
  • jQuery es fácil de instalar y aprender, inicialmente. Pero no es tan fácil si lo comparamos con CSS
  • Si jQuery es implementado inapropiadamente como un Framework, el entorno de desarrollo se puede salir de control.
  
  
  
  
• qué se necesita para que funcione jQuery?
  
  

  1.- Descarga la última versión del framework

  Accede a la página de jQuery para descargar la última versión del framework. En el momento de escribir este artículo la release actual es la 1.3.2, y con la que hemos realizado estos ejemplos. Sin embargo, puede que haya publicado una nueva versión que mejore la actual.
  Dan dos posibilidades para descargar, una que le llaman PRODUCTION, que es la adecuada para páginas web en producción, puesto que está minimizada y ocupa menos espacio, con lo que la carga de nuestro sitio será más rápida. La otra posibilidad es descargar la versión que llaman DEVELPOMENT, que está con el código sin comprimir, con lo que ocupa más espacio, pero se podrá leer la implementación de las funciones del framework, que puede ser interesante en etapa de desarrollo, porque podremos bucear en el código de jQuery por si tenemos que entender algún asunto del trabajo con el framework.
  Verás que la descarga es un archivo js que contiene el código completo del framework. Coloca el archivo en una carpeta en tu ordenador para hacer las pruebas.
  

  2.- Crea una página HTML simple

  Ahora, en el mismo directorio donde has colocado el archivo js, coloca un archivo html con el siguiente código.
  

  <html>
     <head>
        <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
        <script>
  
        </script>
     </head>
  <body>
  <a href="http://www.desarrolloweb.com/">DesarrolloWeb.com</a>
  </body>
  </html>

  Como podrás ver, es una página bien simple, en la que tenemos una llamada a un script externo llamado jquery-1.3.2.min.js. Este es el código de jQuery que hemos descargado de la página del framework. Si has descargado una versión distinta, quizás el archivo se llame de otra manera, así que es posible que tengas que editar ese nombre de archivo para colocar el que tengas en el directorio.
  Con ese script ya hemos incluido todas las funciones de jQuery dentro de nuestra página. Sólo tienes que prestar atención a que tanto el archivo .html de esta página, como el archivo .js del framework estén en el mismo directorio. Y, como decía, que el archivo que incluimos con la etiqueta SCRIPT sea el .js que nosotros hemos descargado.
  Además, como se puede ver, hemos dejado dentro del HEAD una etiqueta SCRIPT de apertura y cierre que está vacía. Todo el código que vamos a explicar a continuación tendrás que colocarlo en dentro de esa etiqueta.
  

  3.- Ejecutar código cuando la página ha sido cargada

  El paso que vamos a explicar ahora es importante que se entienda, aunque sin lugar a dudas a lo largo del manual publicado en DesarrolloWeb.com, lo veremos hasta la saciedad. Se trata de detectar el momento en que la página está lista para recibir comandos Javascript que hacen uso del DOM.
  Cuando hacemos ciertas acciones complejas con Javascript tenemos que estar seguros que la página haya terminado de cargar y esté lista para recibir comandos Javascript que utilicen la estructura del documento con el objetivo de cambiar cosas, como crear elementos, quitarlos, cambiar sus propiedades, etc. Si no esperamos a que la página esté lista para recibir instrucciones corremos un alto riesgo de obtener errores de Javascript en la ejecución.
  En el taller de programación con el DOM de Javascript hemos podido explicar que es el DOM y la importancia de realizar acciones sólo cuando el DOM está listo. Pero si no queremos entretenernos con la lectura de este texto, sirve con saber que, cuando queremos hacer acciones con Javascript que modifiquen cualquier cosa de la página, tenemos que esperar a que la página esté lista para recibir esos comandos.
  Generalmente, cuando se desea ejecutar Javascript después de la carga de la página, si no utilizamos ningún framework, lo más normal será utilizar un código como este:
  

  window.onload = function () {
     alert("cargado...");
  }

  Pero esta sentencia, que carga una funcionalidad en el evento onload del objeto window, sólo se ejecutará cuando el navegador haya descargado completamente TODOS los elementos de la página, lo que incluye imágenes, iframes, banners, etc. lo que puede tardar bastante, dependiendo de los elementos que tenga esa página y su peso.
  Pero en realidad no hace falta esperar todo ese tiempo de carga de los elementos de la página para poder ejecutar sentencias Javascript que alteren el DOM de la página. Sólo habría que hacerlo cuando el navegador ha recibido el código HTML completo y lo ha procesado al renderizar la página. Para ello, jQuery incluye una manera de hacer acciones justo cuando ya está lista la página, aunque haya elementos que no hayan sido cargados del todo. Esto se hace con la siguiente sentencia.
  

  $(document).ready(function(){
     //código a ejecutar cuando el DOM está listo para recibir instrucciones.
  });

  Por dar una explicación a este código, digamos que con $(document) se obtiene una referencia al documento (la página web) que se está cargando. Luego, con el método ready() se define un evento, que se desata al quedar listo el documento para realizar acciones sobre el DOM de la página.
  

  4.- Insertar un manejador de evento a la etiqueta A (enlace) que hay en la página

  Ahora que ya sabemos cómo y cuando debemos ejecutar las acciones de jQuery que alteren la funcionalidad, contenidos o aspecto de la página, podemos insertar un poco de código para demostrar el método de trabajo con jQuery.
  Para este primer ejemplo vamos a crear un evento click en el enlace, para mostrar un mensaje cuando se haga clic sobre el link. Para crear un evento click sobre un elemento tenemos que invocar al método click sobre ese elemento y pasarle como parámetro una función con el código que queremos que se ejecute cuando se hace clic.
  

  $("a").click(function(evento){
     //aquí el código que se debe ejecutar al hacer clic
  });

  Como vemos en el código anterior, con $("a") obtenemos una referencia al enlace. Bueno, en realidad con ello estamos estamos seleccionando todas las etiquetas A (enlaces) del documento, pero como sólo hay un enlace, en realidad nos vale. Luego, el método click() del sobre $("a") estamos definiendo un evento, que se ejecutará cuando se haga clic sobre el enlace. Como se puede ver, al método click se le pasa una función donde se debe poner el código Javascript que queremos que se ejecute cuando se haga clic sobre el enlace.
  Ahora veamos la definición del evento clic completa, colocada dentro del evento ready del document, para que se asigne cuando la página está lista.
  

  $(document).ready(function(){
     $("a").click(function(evento){
        alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
     });
  });

  Por líneas, esto es una recapitulación de lo que hemos hecho:
  

  $(document).ready(function(){

  Esta línea sirve para hacer cosas cuando la página está lista para recibir instrucciones jQuery que modifiquen el DOM.
  

  $("a").click(function(evento){

  Con esta línea estamos seleccionando todas las etiquetas A del documento y definiendo un evento click sobre esos elementos.
  

  alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");

  Con esta línea simplemente mostramos un mensaje de alerta informando al usuario que se ha hecho clic sobre el enlace.
  

  5.- Guarda el archivo html y ábrelo en un navegador

  Una vez que tenemos hecho nuestra primera página con jQuery, la puedes guardar y ejecutarla en un navegador. Prueba hacer clic en el enlace y debería salirte la ventana de alerta.
  Puedes ver este script en funcionamiento en una página aparte.
  Ya está hecho y funcionando tu primer script con jQuery!
  Por si acaso quedaron dudas, dejamos aquí el código completo que deberías tener:
  

  <html>
  <head>
     <title>Primer script con jQuery</title>
  <script src="jquery-1.3.2.min.js" type="text/javascript"></script>   
  <script>
  $(document).ready(function(){
     $("a").click(function(evento){
        alert("Has pulsado el enlace...nAhora serás enviado a DesarrolloWeb.com");
     });
  });
  </script>
  </head>
  
  <body>
  
  <a href="http://www.desarrolloweb.com">Ir a DesarrolloWeb.com</a>
  
  </body>
  </html>

  6.- Extra: Bloquear el comportamiento normal de un enlace

  Ahora veamos una pequeña modificación para alterar el comportamiento por defecto de los enlaces. Como sabemos, cuando se pulsa un enlace nos lleva a una URL. Luego al hacer click, primero se ejecuta lo que hayamos colocado en el evento click del enlace y luego el enlace lleva al navegador a una nueva URL.
  Este comportamiento se puede bloquear también desde jQuery, añadiendo una llamada al método preventDefault() sobre el evento. Si te fijas, la función definida para marcar el comportamiento del evento click sobre el enlace recibía un parámetro. Ese parámetro es un manejador de evento. Y tiene sus propios métodos y propiedades, como este preventDefault() que comentábamos. Su uso es el siguiente:
  

  $(document).ready(function(){
     $("a").click(function(evento){
        alert("Has pulsado el enlace, pero vamos a cancelar el evento...nPor tanto, no vamos a llevarte a DesarrolloWeb.com");
        evento.preventDefault();
     });
  });

  Como hemos podido ver invocando a evento.preventDefault() lo que conseguimos en este caso es que el link no lleve a ningún sitio, simplemente se ejecutará el código Javascript contenido para el evento click.
  

  7.- Extra 2: Documento básico con jQuery ya cargado por medio de un CDN

  El código siguiente lo puedes usar de base para practicar con jQuery. Aunque sea un código bastante simple tiene algunos detalles interesantes, como la recomendación de colocar los scripts al final del documento, antes del cierre de la etiqueta BODY, el uso del resumen del "document ready" o la utilización de un CDN. Quizás es un poco pronto para comentar todo esto, básicamente también porque se explica en otros artículos dentro de este manual.
  Para no alargarnos más en este artículo te dejamos el código tal cual, que podrás copiar y pegar para iniciar un documento HTML en el que ya tengas cargado jQuery y un script vacío (solo el document ready) para que comiences a insertar tu código Javascript y jQuery.
  

  <!doctype html>
  <html lang="es">
  <head>
      <meta charset="UTF-8">
      <title>Curso de jQuery</title>
  </head>
  <body>
      
      
      <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
          $(function(){
              //Tu código jQuery
              
          })
      </script>
  </body>
  </html>