Dom Y Ajax

Taller Avanzado de Proyectos de Programación
Marco Teórico DOM y AJAX

DOM y AJAX
DOM es el acrónimo de Document Object Model y consiste en la definición de los objetos
Javascript que modelan un documento HTML que se visualiza en un browser, permitiendo rescatar
información introducida por el usuario o cambiar la apariencia de la página (cambiando los objetos
mediante sus métodos yrelaciones) sin necesidad de recargarla.
Ajax es el acrónimo de “Asynchronous Javascript And XML”, el conjunto de tecnologías que logran
una experiencia de usuario más interactiva en las páginas web dado que permiten enviar o
solicitar datos al servidor, recibir respuesta e incluso modificar la estructura y contenido de la
página en forma dinámica sin recargarla vía DOM).
Esto evoluciona elmecanismo de interacción propuesto por lenguajes dinámicos como ASP o PHP
que se basa principalmente en la recepción de datos de los formularios HTML y el envío de páginas
HTML enteras para que sean recargadas en el browser.
XML ha sido incluido dentro del acrónimo porque en términos generales era el lenguaje más
utilizado para enviar y recibir datos desde el servidor aunque esto no es obligatoriosiendo que
cada desarrollador selecciona el formato de intercambio más adecuado a su propósito.

PHP + HTML

PHP + HTML (DOM) + AJAX

1. Dame Página
Server

1. Dame Página

Browser

Server

Browser

2. Ten Página
3. Dame Datos
2.Ten Página

5.
Modificar
Página

4. Ten Datos

22/12/2011

Página 1 de 6

Taller Avanzado de Proyectos de Programación
Marco Teórico DOM yAJAX

DOM Document Object Model
El DOM es un conjunto de objetos de diversos tipos que están organizados en forma jerárquica de
igual forma que el lenguaje HTML y que poseen distintos atributos que definen su
comportamiento.
A cada componente de la jerarquía se lo suele conocer también con el nombre de Nodo o
Elemento de determinado tipo (un nodo de tipo tabla, un elemento de tipo imagen,etc.) y se
habla de que un nodo tiene uno o más hijos que se agregan mediante el método appendChild.
Para crear un nodo se utiliza un Factory Method llamado createElement ubicado en el objeto
document que es un objeto preexistente para el javascript de usuario pero no pasa a ser
visualizado en el browser hasta tanto se incorpora a un objeto que ya sea parte de la jerarquía de
objetos que naceen document.body. Es decir, se pueden crear muchos nodos pero no serán
visibles hasta tanto no hagamos el appendChild correspondiente que lo agregue al
document.body o a un objeto que haya sido previamente agregado al mismo.
El archivo ejemplo.js muestra el potencial del D.O.M.1:

1

Atención que la function onLoad no está siendo utilizada como el constructor de una clase llamado onLoadsino simplemente como una función con dicho nombre.

22/12/2011

Página 2 de 6

Taller Avanzado de Proyectos de Programación
Marco Teórico DOM y AJAX

El punto de acceso principal al DOM es el objeto document y en particular el objeto contenido en
el atributo body de dicho objeto, que representa lo contenido a nivel del tag del
documento HTML.
Por lo anterior es que toda función quemodifique el DOM debe ser ejecutada a posterior de
habernos asegurado que el documento terminó de cargarse. Para ello toda función de
modificación del DOM se realiza a partir de eventos en el propio formulario o dentro del evento
onLoad del body como puede observarse en el archivo dom.html que compone este ejemplo, en
donde se invoca desde dicho método a la función onLoad definida en el archivoejemplo.js:
DOM.html





22/12/2011

Página 3 de 6

Taller Avanzado de Proyectos de Programación
Marco Teórico DOM y AJAX

AJAX : Procesamiento de la Información en el Servidor
A nivel de servidor se debe definir una o más páginas web que reciban la petición que se enviará
desde el browser y arme la respuesta a devolver.
Para este ejemplo realizaremos una página ASP2 muy...