29 de agosto de 2006

Cargar Javascript desde Javascript con Ajax

¿Que te parecería cargar solamente código javascript en una página para aquellas funciones que un usuario decida realizar y no para todas las demás que pudieran estar incluidas en la página pero que el usuario no decida ejecutar?

Muchas veces nos vemos con el problema de tener que cargar un gran número de funciones en javascript en una determinada página sabiendo que un usuario utilizará solo un par de ellas, pero como no sabemos cuales serán las necesarias, nos vemos obligados a incluirlas todas.

Pues les tengo una buena noticia: Podemos cargar trozos de javascript perfectamente por Ajax, así solo llamaremos a las funciones que sean necesarias para las opciones seleccionadas por el usuario. ¿Cómo hacerlo?

Pues para cualquiera que haya usado Ajax para traer texto, HTML ó datos en formato XML, no debe ser sorpresa saber que se puede traer por Ajax algo de Javascript ya que hablamos de simple texto plano.

El truco está en traerlo según requerimiento como se hace con muchas otros contenidos mediante Ajax, y ejecutarlo luego mediante la función de javascript "eval" que permite evaluar y ejecutar una cadena de caracteres como sentencias del lenguaje.

No es para nada complicado.
simplemente se trata de evaluar la respuesta obtenida por el objeto XMLHttpRequest

eval(XMLHttpRequestObject.responseText)

Así de simple.

Ajax - Cada día descubrimos más aplicaciones para una técnica de más de 10 años

Estabamos preguntándonos acerca de si era hora de empezar a cambiar nuestras páginas al estandar de 1024 píxeles de ancho cuando apareció ante mi el siguiente parámetro en una hoja CSS.

width:948px
Es algo así como 1024 menos la barra de desplazamiento y un poquito de margen.

¿Adivinen de donde saqué esto?

Es el ancho fijo de la página de Yahoo!!!! Solo cuando tu monitor está en 1024.
Pero si la ven en una resolución de 800x600 entonces se ajusta a 785 fijo, sin encojer ni alargar nada solo cambiando el contenido, es decir desaparece una barra de menú lateral y los contenidos y contenedores se desplazan a otras posiciones. Nada de "liquid layout". Sería algo así como "Intelligent Layout"

Para que puedan comprobarlo, cambien la resolución del monitor y solicítenle la página home a Yahoo. Luego cierren el navegador, cambien la resolución nuevamente y repitan el proceso. Al principio pueden llegar a creer que Yahoo les ha enviado una página completamente diferente. No se preocupen es la misma.

Esto es algo más complejo que la programación liquida, es diagramación "by request".
Claro que pueden surgir algunas dudas sobre esto como por ejemplo...

Pregunta: ¿Cómo hago del lado del servidor para saber el tamaño del monitor del usuario si aún no ha llegado mi código a su navegador y/o no me ha solicitado otra página?
Respuesta: AJAX

Pregunta: ¿Cómo hago para generar un contenido diferente para cada usuario en una misma página basado en una información que no he recibido hasta enviarle dicha página? (es la misma pregunta algo más elaborada)
Respuesta: AJAX

Lo explico en palabras simples: Yahoo envía en realidad una "página scout" (full javascript, XLM DOM, DHTML y solo aquellos contenidos que siempre se van a mostrar) que es realmente es un analizador de las características del usuario y según estas características el código de la "página scout" contruye y ubica los layers y contenedores adecuados en las posiciones adecuadas. Luego mediante Ajax, se solicita la información necesaria solo para los contenedores creados y no se trae la información no requerida y/o aún no solicitada. Después a medida que el usuario hace click en los contenedores (las pestañas y/o botones) se solicita la información y se va mostrando a medida que llega.

En fin Ajax permite lo que todos los programadores WEB alguna vez hemos soñado: Obtener información del servidor sin necesidad de solicitar una nueva página. Para comprobar si lo que digo es cierto, seleccionen un texto dentro de uno de los contenedores ocultos (cambiando de pestaña) luego vayan al código fuente a ver si lo encuentran... ¡Como por arte de magia, no está!!!

Claro lo que están viendo en el fuente es la "página scout" que llegó antes de solicitar dicho contenido. Solo tiene partes que se muestran en el arranque, pero lo que el usuario puede solicitar después (70% o más de la información total) no está allí.

¿Cuál es la idea? Bueno antes que nada, no solicitar al server lo que el usuario no está interesado en recibir, evitando carga innecesaria de contenido. Luego, poder presentar gran cantidad de opciones sin necesidad de navegar a otras páginas y solo solicitar la información necesaria si es requerida. Además enviar datos del usuario al servidor sin necesidad de esperar a la carga de una segunda página.

Ajax: Asincronous Javascript & XML , es más que una unión de tecnologías con más de 10 años. Ajax es una nueva filosofía de programación...

Entradas populares