domingo, 5 de noviembre de 2006

¿Qué es Ajax? Parte II: La tecnología Ajax.

La verdad es que saber que es teoricamente una cosa normalmente no nos sirve de mucho. En este caso no sólo necesitamos más información sino que la teoría no va muy acompañada de la prácica. Para diferenciar lo que es el método Ajax de la tecnología Ajax nos puede venir bien hacer un simil con caso del televisor y la televisión: El primero es un aparato que nos permite ver imagen y sonido, el segundo es una plataforma que gestiona qué se ve en el primero y define el uso principal y casi exclusivo del aparato.

Ajax desde sus inicios dejó de ser sólo un método para cargar contenidos de forma asincrona y se convirtió en una unión de tecnologías que, haciendo uso de la parte fundamental del método Ajax transformaban radicalmente la web. Es preciso, entonces, que demos un repaso a que añadimos y que no tenemos realmente en cuenta sobre Ajax cuando lo usamos en internet actualmente.

Redefinición del método Ajax.

Ajax no usa XML: Si antes deciamos que ajax era la carga y uso de objetos XML mediante javascript la práctica nos demuestra que en la mayor parte de los casos no llega a usarse ni un objeto XML en muchas de las webs catalogadas como estandares del AJAX.

Y esto es porque el objeto XmlHttpResponse (el encargado de hacer las cargas asincrónicas) tiene entre sus opciones la de devolver directamente el texto cargado sin importarle si era o no un XML. Esto a llevado a que la mayor parte de los desarrolladres empiecen por cargar textos planos y sólo carguen objetos XML cuando realmente las operacines son lo suficientemente complejas como para necesitarlos. En realidad esta es la opción lógica ya que se necesita gastar mucho menos ancho de banda para cargas de texto que para cargas de objetos enteros.

Ajax no necesita documentos XHTML: Si bien el DOM tendría que ser valido sólo para documentos XML o XHTML en la práctica javascript es capaz de manipular perfectamente HTML normal y corriente con las mismas funciones que manipulan XHTML. Eso lleva a que los desarrolladores no se preocupen por tener un XHTML estricto. Sí, muchos usan "<br/>" en vez de "<br>" pero eso no sirve de nada si luego no cierras bien todas las etiquetas...

En definitiva, ajax sólo necesita javascript y un navegador moderno para funcionar sobre cualquier tipo de documento HTML y eso es hoy por hoy lo que la mayoría entienden sobre el método ajax.

Ajax no es sólo un método sino también una técnología.

Ajax no está sólo en el mundo y existen otras tecnologías sin las cuales su uso es posible pero realmente incomodo y desaconsejado. Hasta tal punto se ha hecho obvia esta necesidad de usar otras técnologias que ha pasado a hablarse de Ajax como una tecnología nueva surgida de la union de todas las necesarias para que la cosa funcione.

El método Ajax.

De sobras entendido ya y explicado en un anterior post de este blog. Recordemos que aun no siendo extrictos con la necesidad de cargar documentos XML el método Ajax ya hace necesarios estos elementos:

  • JavaScript y el conocimiento de su objeto XmlHttpRequest

  • El DOM y su manejo con JavaScript


  • DHTML

    El llamado "HTML Dinamico" también es hijo directo de JavaScript y de DOM. Fué el paso de la concepción de una página web como una hoja estatica a una pantalla que era capaz de interactuar con el usuario. DHTML detecta eventos basados en las acciones del usuario o en el propio tiempo y modifica la web como resultado de estos eventos.

    DHTML es vital para manejar ajax ya que por un lado nos sirve para detectar cuando y como hacer las cargas y por otro nos permite modificar nuestra página en función de lo cargado.

    CSS

    Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son quizás las menos necesarias para que Ajax pueda empezar a funcionar pero también es la tecnología que más simplifica el trabajo de los desarrolladores. CSS nos permite definir el estilo visual de cualquier contenido de forma externa al HTML. Esto para trabajar con DHTML y con Ajax es esencial ya que nos permite directamente asignar la forma visual de los nuevos contenidos y no tener que trabajarla paso por paso sólo con DHTML.

    Lenguaje de Preproceso de lado del Servidor

    PHP, ASP, XSQL o cualquiera que sea el lenguaje; para que Ajax tenga sentido no debemos cargar páginas estaticas sino contenidos generados por distintas funciones o extraidos de base de datos. La carga de páginas estaticas no sacaría ningún provecho a esta tecnología.


    Ajax no es Dificil, pero usarlo llega a serlo.

    El uso de Ajax no es realmente complicado. El objeto XmlHttpRequest puede ser un poco distinto al resto de objetos de javaScript pero no deja de ser un sólo objeto con unos pocos métodos y propiedades asociados.

    La dificultad de Ajax viene de que para poder sacarle partido es preciso dominar la tecnología ajax completa y eso implica el dominio de todas las teconologías explicadas anteriormente por separado. Ese el el motivo por el que aprender Ajax a muchos se les antoja dificil: Deben aprender JavaScript a fondo, comprender bien el DOM y tener al menos unas nociones de CSS. Aprender sólo Ajax no sirve.

    A todo hay que sumarle, como siempre que hablamos de programar de lado del cliente, que todos estos elementos son tratados de forma distinta por los distintos navegadores (sobretodo por internet explorer). Y no los busques porque que no hay manuales en castellano que expliquen bien como hacer un codigo que valga para todos los navegadores.

    La Función de Referencia.

    Esta es una de mis funciones javascript preferidas... o al menos a la que más partido le saco mientras desarrollo. Me gusta por tres motivos distintos:

  • Lo fácil que te hace referirte a cualquier objeto del DOM.

  • La gran cantidad de lineas de código que te permite ahorrar.

  • Que te permita crear funciones que sean independientes de si les entra un 'id' o un elmento.


  • Aquí la teneis:

    function $$(id_el_tag){
    var el;
    if (typeof id_el_tag=='object') el=id_el_tag; else {
    if ((arguments[1])||(arguments[1]==0))
    el=document.getElementsByTagName(id_el_tag)[arguments[1]];
    else el=document.getElementById(id_el_tag); }
    return el;}


    ¿Qué es lo que hace?

    Es sencilla...

  • Si la llamamos introduciendole como variable un elemento devuelve el mismo elemento.

  • Si la llamamos introduciendole sólo un id devuelve el elemento con ese id

  • Si la llamamos introduciendole un nombre de etiqueta (div, span, table) y como segunda variable un numero devuelve el numero de elemento indicado con esa etiqueta


  • ¿Como usarla?

    Siempre que queramos referirnos a un elemento del DOM llamamos directamente a esta función como si ya se tratase directamente del objeto.

    Así pasamos de esto:
    el=document.getElementById("mi_elemento");
    el.innerHTML="Nuevo contenido de mi elemento";
    el="";

    a esto:
    $$("mi_elemento").innerHTML="Nuevo contenido de mi elemento"


    Cuando creemos funciones en vez de decidir si la función necesita recibir un elemento directamente o su id llamamos a esta función para que pueda recibir cualquier de las dos cosas.

    Por ejemplo esta función admitiría recibir un elemento o un id:
    function cambiar_contenido(elemento,contenidoNuevo){
    $$(elemento).innerHTML=contenidoNuevo;}


    Por ultimo en vez de ir creando Matrices con todos los tags del DOM, si sabemos exactamente que número ocupa el que buscamos podemos referirnos a él de esta manera.

    $$("div",3).innerHTML="Soy el div número 4";
    // el 4 porque las matrices empiezan a contar desde 0.


    Y básicamente eso es todo lo que hace. Espero que os sea tan útil como me lo es a mi siempre.

    La función de Referencia: ikReferencia.js

    sábado, 4 de noviembre de 2006

    ¿Qué es Ajax? Parte I: Definición

    Ajax ya lleva mucho tiempo con nosotros con lo que la mayor parte de los interesados en desarrollos web ya saben de que va. Sin embargo no debería empezar este blog sin exponer una explicación de que es hoy en día ajax para los desarrolladores.

    AJAX: Asincronic Javascript and Xml.

    Carga asincrona de conenidos en formato XML mediante Javascript. Y es que por definicion Ajax es sólo eso, el método por el cual conseguir cargar mediante JavaScript contenidos XML de forma asincrona para luego incorporarlos al documento HTML e ir danto más y más información al usuario.

    Pasemos a describir mejor cada una de las partes de la definición y a incorporar otra más DOM
    (Document Object Model) sin el cual la carga de contenidos por Ajax no tiene ningún sentido.

    Asincronía.

    Por lo general los contenidos web se cargan siempre tras una petición del usuario. Este, ya sea escribiendo una dirección en su navegador, clickando en un link o mandando un formulario, pide una pagina completa a un servidor y su navegador la interpreta mostrándosela en un entorno gráfico más o menos agradable. La asincronía se refiere a romper este modo de trabajo y es la gran virtud de ajax; usandolo podemos hacer que el usuario pida y reciba nuevos contenidos desde el servidor sin cambiar la página sino como añadidos que pueden ser luego usados de la forma que sea.

    JavaScript.

    JavaScript es un (más bien el) lenguaje de programación de lado del cliente. Eso quiere decir que sus scripts se cargan con la página y que es el navegador el que los procesa. Normalmente es usado para dar cualidades a los documentos que el HTML por si solo no tiene. Por ejemplo todos esos botones que se pueden encontrar en varias webs que consiguen que aparezcan y desaparezcan cosas del documento suelen ser JavaScript. Este lenguaje es además el que posee entre sus objetos el famoso XmlHttpRequest que es el encargado de hacer las llamadas asincronas. En otras palabras Javascript es el lenguaje encargado de manejar ajax.

    Xml.

    XML es un formato abierto de documentos por etiquetas. Su forma nos permite abrir etiquetas del tipo "contenido" que terminan formando un árbol de documento al anidarse unas etiquetas dentro de otras:

    <caja>
      <contenido1>mi Contenido</contenido1>
      <contenido2>
        <subcontenido1>mi Contenido</subcontenido1>
        <subcontenido2>mi Contenido</subcontenido2>
      </contenido2>
      <contenido3>mi Contenido</contenido3>
    </caja>


    Sí, HTML bien formado (con todo bien abierto y cerrado) es un documento XML. Al HTML valido que sea además XML se le llama XHTML.

    DOM: Document Object Model
    Modelo de Objetos del Documento.

    Este modelo es el que marca la forma de los contenidos XML y trata a cada una de estas etiquetas como "nodos de un árbol de DOM". En el ejemplo anterior CONTENIDO2 según el DOM sería un nodo que tendría como nodo-padre a CAJA y como nodos-hijos a
    SUBCONTENIDO1 y SUBCONTENIDO2.

    JavaScript, aparte de ser el motor de ajax, tiene varias funciones que nos permiten encontrar y colocar cosas en objetos que respondan al esquema de DOM. Como además un documento HTML bien formado (XHTML) también responde a este tipo de estructura nos encontramos con infinidad de posibilidades al poder cargar un XML sacar de él lo que queramos e insertarlo en nuestro XHTML.

    Esta es la base teórica de la incorporación de contenidos mediante Ajax: Cargarlos de forma asíncrona y alterar el documento segun lo cargad mediante las funciones de DOM.