PROGRAMACIN WEB II

UNIANDES

AJAX, DOM, XML http REQUEST

Julio Cesar Pez Carrin
TUTOR: ING. PATRICIO OCHOA

Puyo 23 de Mayo de 2012

PROGRAMACIN WEB II NOMBRE: Julio Pez. FECHA: 18-05-2012. TEMA: AJAX, DOM, XML http REQUEST OBJETO XML http REQUEST Un objeto XMLHttpRequest es una instancia de una API que nos permite la transferencia de datos en formato XML desde los script del navegador ( JavaScript, JScrip, VBScript ... ) a los del servidor ( PHP, Perl, ASp, Java ... ) e inversamente. QU ES EL OBJETO XMLHTTPREQUEST Y POR QU UTILIZARLO? Tanto IE, Safari, Mozilla, Konqueror, Ice Browser, Opera como todos los navegadores que se basen en los motores de estos proveen un mtodo para el cliente basado en javascript por el cual se pueden hacer llamadas y peticiones al servidor a travs de HTTP, esta tecnologa es la conocida como AJAX. El objeto necesario para estas operaciones es XMLHttpRequest y aunque su nombre indique XML no est limitado al uso de este formato sino que la respuesta puede ser generada en cualquier tipo de archivo devolviendo datos en formato de texto, XML o HTML. Segn el archivo de origen los flujos binarios pueden causar problemas en javascript, y personalmente nunca lo he testeado. MTODOS Y PROPIEDADES DEL OBJETO XMLHTTPREQUEST El objeto XMLHttpRequest posee muchas otras propiedades y mtodos diferentes a las manejadas por la primera aplicacin de AJAX. A continuacin se incluye la lista completa de todas las propiedades y mtodos del objeto y todos los valores numricos de sus propiedades. Las propiedades definidas para el objeto XMLHttpRequest son:
Propiedad readyState responseText responseXML Descripcin Valor numrico (entero) que almacena el estado de la peticin El contenido de la respuesta del servidor en forma de cadena de texto El contenido de la respuesta del servidor en formato XML. El objeto devuelto se puede procesar como un objetoDOM El cdigo de estado HTTP devuelto por el servidor (200 para una respuesta correcta, 404 para "No encontrado",500 para un error de servidor, etc.) El cdigo de estado HTTP devuelto por el servidor en forma de cadena de texto: "OK", "Not Found", "Internal Server Error", etc.

status

statusText

Los mtodos disponibles para el objeto XMLHttpRequest son los siguientes:

Mtodo abort() getAllResponseHeaders() Descripcin Detiene la peticin actual Devuelve una cadena de texto con todas las cabeceras de la respuesta del servidor Devuelve una cadena de texto con el contenido de la cabecera solicitada Responsable de manejar los eventos que se producen. Se invoca onreadystatechange cada vez que se produce un cambio en el estado de la peticin HTTP. Normalmente es una referencia a una funcin JavaScript Establece los parmetros de la peticin que se realiza al servidor. open("metodo", "url") Los parmetros necesarios son el mtodo HTTP empleado y la URL destino (puede indicarse de forma absoluta o relativa) send(contenido) setRequestHeader("cabecera", "valor") Realiza la peticin HTTP al servidor Permite establecer cabeceras personalizadas en la peticin HTTP. Se debe invocar el mtodoopen() antes que setRequestHeader()

getResponseHeader("cabecera")

Cdigo para crear un objeto XMLHttpRequest

function makeAJAX() { var xmlhttp=false; // Entre estos ids podemos obviar comodamente // la versin Msxml2.XMLHTTP.7.0 var ids = ["Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; /*@cc_on @*/ /*@if (@_jscript_version >= 5) // JScript gives us Conditional compilation, // we can cope with old IE versions. // and security blocked creation of the objects. for(var i=0; !xmlhttp && i < ids.length; i++) { try { xmlhttp = new ActiveXObject(ids[i]); } catch(ex) { xmlhttp = false; } } @end @*/ if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } /* * Esta condicin es realmente obsoleta pues * actualmente todos los navegadores modernos * ya vienen con compatibilidad innata con * ActiveXObject o con XMLHttpRequest * tambin se puede eliminar del cdigo, * de echo yo nunca la he utilizado */ if (!xmlhttp && window.createRequest) { try { xmlhttp = window.createRequest(); } catch (e) { xmlhttp=false; } } return xmlhttp; }

AJAX Ajax, es una tcnica de desarrollo web para crear aplicaciones interactivas las cuales se ejecutan en el navegador de los usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas aumentando la interactividad y velocidad en las aplicaciones. El concepto que maneja Ajax sera cargar y renderizar una pgina, luego mantenerse en esa pgina mientras scripts y rutinas van al servidor buscando, los datos que son usados para actualizar la pgina solo re-renderizando la pgina y mostrando u ocultando porciones de esta. AJAX es la unin de varias tecnologas de desarrollo Web que buscan crear aplicaciones interactivas. AJAX por sus siglas en ingles significa Asynchronous JavaScript And XML (JavaScript asncrono y XML) y la importancia de sta tcnica est en que al utilizarla, sta se ejecuta en el lado del cliente es decir el navegador Web, pero por debajo mantiene una comunicacin asncrona con el servidor. Con sta asincrona utilizando XML, cuando se desee hacer algn cambio en el desarrollo Web, no ser necesario que la pgina se recargue nuevamente; lo que en ltimas se traduce en aplicaciones mucho ms interactivas, rpidas y veloces y eficientes. FUNCIONAMIENTO

Podemos comprobar que mientras el servidor esta haciendo lo suyo, el usuario est esperando a que se cargue nuevamente la pgina. Quizs a muchos nos ha pasado que cuando vamos a llenar un formulario tenemos pasar por varias pginas, como si estuvisemos siguiendo varias ventanas. Con AJAX esto se soluciona, porque en una misma pgina podemos hacer varias cosas, sin tener que saltar a otra pagina Web. Con AJAX la interaccin que tiene el usuario con alguna aplicacin se mejora porque no tendr que saltar de pgina en pgina para hacer alguna tarea especfica, as como tambin se mejora que el usuario no se detenga cuando cierta aplicacin necesite algo del servidor. AJAX se basa en el modelo de aplicacin Web asncrona de la siguiente manera.

el motor AJAX permite que la interaccin del usuario con la aplicacin suceda asincrnicamente (independientemente de la comunicacin con el servidor). As el usuario nunca estar mirando una ventana en blanco del navegador y un icono de reloj de arena esperando a que el servidor haga algo.

AJAX se basa en la combinacin de 4 tecnologas existentes, entre las que estn: - JavaScript: es un lenguaje interpretado, es decir, que no requiere compilacin, utilizado principalmente en pginas Web, con una sintaxis semejante a la del lenguaje Java y el lenguaje C - XML: es un metalenguaje extensible de etiquetas desarrollado por el World Wide Web Consortium (W3C). Es una simplificacin y adaptacin del SGML y permite definir la gramtica de lenguajes especficos (de la misma manera que HTML es a su vez un lenguaje definido por SGML). Por lo tanto XML no es realmente un lenguaje en particular, sino una manera de definir lenguajes para diferentes necesidades. - HTML: Es un lenguaje de marcacin diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas Web. - CSS: son un lenguaje formal usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de estilo que servir de estndar para los agentes de usuario o navegadores. AJAX se vale del objeto JavaScript XMLHttpRequest, objeto con el cual una gran parte de los navegadores pueden recuperar y enviar datos en XML directamente, en background.

DOM (DOCUMENT OBJECT MODEL) DOM es una una interfaz de programacin de aplicaciones (API) para documentos HTML y XML. Define la estructura lgica de los documentos y el modo en que se accede y manipula un documento. Con el Modelo de Objetos del Documento los programadores pueden construir documentos, navegar por su estructura, y aadir, modificar o eliminar elementos y contenido. Se puede acceder a cualquier cosa que se encuentre en un documento HTML o XML, y se puede modificar, eliminar o aadir usando el Modelo de Objetos del Documento. El DOM representa esta tabla de este modo:

En el DOM, los documentos tienen una estructura lgica que es muy parecida a un rbol. El DOM no especifica que los documentos deban ser implementados como un rbol o un bosque, ni tampoco especifica cmo deben implementarse las relaciones entre objetos. El DOM es un modelo lgico que puede implementarse de cualquier manera que sea conveniente. En esta especificacin, usamos el trmino modelo de estructura para describir la representacin en forma de rbol de un documento, evitando la utilizacin de trminos tales como "rbol" o "bosque" para evitar la implicacin de una implementacin en particular. Una propiedad importante de los modelos de estructura del DOM es su isomorfismo estructural: si dos implementaciones cualesquiera del Modelo de Objetos del Documento se usan para crear una representacin del mismo documento, ambas crearn el mismo modelo de estructura, con exactamente los mismos objetos y relaciones. Se eligi el nombre "Modelo de Objetos del Documento" porque es un "modelo de objetos" en el sentido tradicional del diseo orientado a objetos: los documentos se modelizan usando objetos, y el modelo comprende no solamente la estructura de un documento, sino tambin el comportamiento de un documento y de los objetos de los cuales se compone. En otras palabras, los nodos del diagrama anterior no representan una estructura de datos, sino que representan objetos, los cuales pueden tener funciones e identidad. Como modelo de objetos, el DOM identifica:

las interfaces y objetos usados para representar y manipular un documento la semntica de estas interfaces y objetos, incluyendo comportamiento y atributos las relaciones y colaboraciones entre estas interfaces y objetos

INTERFACES DOM E IMPLEMENTACIONES DOM El DOM especifica interfaces que pueden utilizarse para manipular documentos XML o HTML. Es importante darse cuenta de que estas interfaces son una abstraccin. Comparables a las "clases de base abstractas" de C++, constituyen un medio de especificar una forma de acceder y manipular la representacin interna que una aplicacin hace de un documento. Las interfaces no implican una implementacin concreta en particular. Cada aplicacin DOM es libre de mantener los documentos segn una representacin conveniente cualquiera, siempre y cuando soporte las interfaces mostradas en esta especificacin. Algunas implementaciones del DOM sern programas existentes que usen las interfaces del DOM para acceder a programas escritos mucho antes de que existiera la especificacin del DOM. Por tanto, el DOM se ha diseado para evitar dependencias de la implementacin. En particular, 1. Los atributos definidos en el IDL no implican objetos concretos que deban tener miembros de datos especficos - en las correspondencias con cada lenguaje, se transforman en pares de funciones get()/set(), no en un miembro de datos. (Los atributos de slo lectura slo tendrn una funcin get().) 2. Las aplicaciones DOM pueden proporcionar interfaces adicionales y objetos que no se encuentren en esta especificacin y seguir siendo considerardas como conformes con el DOM. 3. Debido a que especificamos interfaces, y no los objetos reales que deben ser creados, el DOM no puede saber a qu constructores llamar una

implementacin. En general, los usuarios del DOM llamarn a mtodos createXXX() de la clase Document para crear estructuras del documento, y las implementaciones del DOM crearn sus propias representaciones internas de dichas estructuras en sus implementaciones de las funciones createXXX(). Arquitectura del DOM La especificacin del DOM proporciona un conjunto de APIs que forman la API del DOM. Cada especificacin del DOM define uno o mas mdulos y cada mdulo esta asociado con un nombre de funcionalidad. Por ejemplo, la especificacin del Ncleo de DOM (esta especificacin) define dos mdulos:

El mdulo Ncleo, el cual contiene las aplicaciones fundamentales que deben ser implementadas por todas las aplicaciones DOM conformadas, est asociado con el funcionalidad "Core"; El mdulo XML, el cual contiene las aplicaciones que deben ser implementadas por todos las aplicaciones XML 1.0 [XML 1.0] (y superiores) DOM conformadas, est asociado con el funcionalidad "XML".

La siguiente representacin contiene todos los mdulos de DOM, representado utilizando sus nombres de funcionalidades, definidos a lo largo de las especificaciones DOM:

CONCLUSIONES Un objeto XMLHttpRequest es una instancia de una API que nos permite la transferencia de datos en formato XML desde los script del navegador como javascript, a los del servidor como php e inversamente. Por AJAX se entiende a todo aquello que desde el cliente vaya a servidor, realice las acciones que quiera y vuelva al cliente presentando o no cambios sin recargar la pgina. El DOM es una jerarqua de objetos predefinidos que describen los elementos de la pgina web que est mostrando el navegador, as como otras caractersticas del proceso de navegacin como son el historial, el tamao de la ventana de navegacin o el contenido de la barra de estado del navegador.

LINCOGRAFA: http://es.wikipedia.org/wiki/XMLHttpRequest http://www.librosweb.es/ajax/capitulo7/metodos_y_propiedades_del_objeto_xml httprequest.html http://www.programacionweb.net/articulos/articulo/?num=386 http://techlosofy.com/que-es-ajax/ http://www.elcodigo.net/tutoriales/jsavanzado/jsavanzado7.html http://www.w3.org/2005/03/DOM3Core-es/introduccion.html