Breve presentación de AJAX (Asynchronous JavaScript + XML)

1. EQUIPO 3
ERNESTO MENDEZ LECHUGA
TOMAS RICARDO CID MERINO
INSTITUTO TECNOLOGICO DE TEHUACÁN
INGENIERIA EN SISTEMAS COMPUTACIONALES
INSTALACIÓN Y CONFIGURACIÓN DE SERVIDORES WEB
MATERIA: INSTALACIÓN Y CONFIGURACIÓN DE SERVIDORES WEB
PROFESOR: : M.C. FRANCISCO VÁZQUEZ GUZMÁN

3. INTRODUCCION - AJAX
• 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)
• Estas aplicaciones se ejecutan en el cliente, es decir, en
el navegador de los usuarios mientras se mantiene la
comunicación asíncrona con el servidor en segundo plano.
• De esta forma es posible realizar cambios sobre las páginas sin
necesidad de recargarlas, mejorando la interactividad, velocidad
y usabilidad en las aplicaciones.

4. INTRODUCCIÓN - ¿Qué es AJAX?
• Ajax es una tecnología asíncrona, en el sentido de que los datos
adicionales se solicitan al servidor y se cargan en segundo plano sin
interferir con la visualización ni el comportamiento de la página,
aunque existe la posibilidad de configurar las peticiones como síncronas
de tal forma que la interactividad de la página se detiene hasta la
espera de la respuesta por parte del servidor.
• Ajax es una técnica válida para múltiples plataformas y utilizable en
muchos sistemas operativos y navegadores dado que está basado en
estándares abiertos como JavaScript y Document Object Model (DOM).

5. INTRODUCCIÓN - AJAX es una combinación de
cuatro tecnologías ya existentes:
• XHTML (o HTML) y hojas de estilos en cascada (CSS)
para el diseño que acompaña a la información.
• Document Object Model (DOM) accedido con un
lenguaje de scripting por parte del usuario.
• El objeto XMLHttpRequest para intercambiar datos de
forma asíncrona con el servidor web
• XML es el formato usado generalmente para la
transferencia de datos solicitados al servidor

6. INTRODUCCIÓN - AJAX es una combinación de
cuatro tecnologías ya existentes:

7. IMPLEMENTACION - Como funciona AJAX
• Cada acción de un usuario que normalmente generaría un
requerimiento HTTP toma la forma de un llamado JavaScript al
motor AJAX en vez de ese requerimiento.
• Cualquier respuesta a una acción del usuario que no requiera de
un viaje de vuelta al servidor (como una simple validación de
datos, edición de datos en memoria, incluso algo de
navegación) es manejado por su cuenta

8. IMPLEMENTACION - Como funciona AJAX
• Si el motor necesita algo del servidor para responder (sea
enviando datos para procesar, cargar código adicional, o
recuperando nuevos datos) hace esos pedidos asincrónicamente,
usualmente usando XML, sin frenar la interacción del usuario con
la aplicación.

10. RESULTADOS POSIBLES
FORMATO DXL (Herramientas Lotus Domino)
<document form ="ContactInfo">
<item name ="UNID">
<text>A6706DF66CEA473D0325719C0059DB17</text>
</item>
<item name="firstname">
<text>John</text>
</item>
<item name="lastname">
<text>Smith</text>
</item>
<item name="email">
<text>john.simth @ mycompany.com</text>
</item>

11. Instanciación de un objeto DOMDocument
(Sarissa)
var oDomDoc = Sarissa.getDomDocument();
// en Mozilla este método es equivalente a:
var oDomDoc = document.implementation.createDocument();
// en Internet Explorer este método es equivalente al siguiente,
dependiendo de la versión del parser de XML:
var oDomDoc = new ActiveXObject("Msxml2.DOMDocument.4.0");

12. Carga asincrónica de un objeto DOMDocument de
una fuente remota (Sarissa)
var oDomDoc = Sarissa.getDomDocument();
oDomDoc.async = true; // true es el valor por defecto
// agregamos un listener el evento que se dispara cuando la carga se
completa
function loadHandler()
{
if(oDomDoc.readyState == 4)
alert(oDomDoc.xml);
};
oDomDoc.onreadystatechange = loadHandler;
oDomDoc.load("someDocument.xml");

13. Carga asincrónica de un objeto
XMLHttpRequest de una fuente remota
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "someDocument.xml", true);
// agregamos un listener el evento que se dispara cuando la carga se
completa
function loadHandler(){
if(xmlhttp.readyState == 4)
alert(xmlhttp.responseXML.xml);
};
xmlhttp.onreadystatechange = Function("loadHandler()"); // otra forma de
asignar el listener del evento
xmlhttp.send(null);

14. Transformación de un objeto DOM Document
con un XSLT
// obtención del documento fuente
var oDomDoc = Sarissa.getDomDocument();
oDomDoc.async = false;
oDomDoc.load("someDocument.xml");
// obtención del xslt
var oXslDoc = Sarissa.getDomDocument();
oXslDoc.async = false; oXslDoc.load("aStylesheet.xsl");
// transformación, el resultado se obtiene como un String
var sResult = oDomDoc.transformNode(oXslDoc);
alert(sResult);

16. FIN DE PRESENTACIÓN
02 DE SEPTIEMBRE DE 2015