ESPAÑOL: ¡Bienvenido! Es la página inicial de OSIRIS LMS. Regístrese hoy mismo y obtenga acceso a todos nuestros CURSOS GRATUITOS. Clic aquí para registrarse ya. Hemos desarrollado una amplia gamma de cursos “online” (Programación, Multimedia, 3D, Habilidades suaves, etc.), disponibles 24X7. Para más detalle consulte la lista de Cursos Disponibles. Si tiene problemas con el acceso a la plataforma, vea el Tour Virtual de Osiris LMS. También puede consultar la sección de FAQ’s o enviar Solicitud de Soporte Técnico.

ForoForo de discusión
Ejemplo - Introducción a AJAX
Buscador:
Foro > XML > Ejemplo - Introducción a AJAX

Enviado por: Texto del mensaje
Support Osiris LMS 
Nivel : Jefe de Administradores
Mensajes : 114
> Perfil
Archivo adjunto :archivo
Escrito el : Jueves 09-11-2006 A las : 01:20 ( > un mes )
Asunto : Ejemplo - Introducción a AJAX
AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo web para crear aplicaciones interactivas mediante la combinación de tecnologías ya existentes.

Las tecnologías que se utilizan son las disponibles para páginas web: HTML, CSS, XML y JavaScript combinado de forma opcional con algún lenguaje de servidor cómo puede ser PHP, ASP o JSP.

Para entender mejor cómo se combinan HTML, CSS, XML y JavaScript, vamos a analizar un ejemplo. Para nuestro ejemplo primeramente vamos a crear un documento XML llamado doc.xml con el siguiente contenido:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<xml>
<property>
<value>Valor 1</value>
</property>
<property>
<value>Valor 2</value>
</property>
</xml>


Posteriormente crearemos un documento HTML que prácticamente lo único que contiene es código JavaScript que se encarga hacer toda la labor de AJAX:

<html>
<head>
<title>Ejemplo AJAX</title>
<script>
function getData(){
if (oXML.readyState == 4) {
// Obtiene los elementos del documento XML
var xml = oXML.responseXML.documentElement;
// Parsea el documento XML
for (i = 0; i < xml.getElementsByTagName('property').length; i++){
// Obtiene el contenido del elemento property
var item = xml.getElementsByTagName('property')[i];
// Obtiene el valor del elemento value
var txt = item.getElementsByTagName('value')[0].firstChild.data;
// Despliega el valor del elemento value
alert(txt);
}
}
}

function CreateAJAXObject(){
var obj;
if(window.XMLHttpRequest) { // si no es IE
// Crea una referencia al objeto de AJAX
obj = new XMLHttpRequest();
} else { // Es es IE
try {
// Crea una referencia al objeto de AJAX para IE
obj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert('Su navegador no soporta AJAX');
}
}
// Retorna la referencia del objeto
return obj;
}

// Obtiene la referencia del objeto de AJAX
oXML = CreateAJAXObject();
// Abre el documento XML
oXML.open('get', 'doc.xml');
// Invoca la funcion getData() para obtener el contenido de XML
oXML.onreadystatechange = getData;
// Envía la salida
oXML.send('');
</script>
</head>
</html>


Este código está detalladamente explicado mediante comentarios, pero si tienes alguna duda aquí puedes dejar tus comentarios.

Puedes ejecutar este ejemplo y ver su código fuente descargando el archivo adjunto.
Soporte de Osiris LMS
Amplía tus conocimientos en línea