Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Ajax

Ajax permite mandar y recibir datos de manera asincrona


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 184

Visitas el mes pasado: 204

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Curso de ajax
ProgramacionWeb.net
Ajax Tutorial
w3schools.com
Manual de Ajax, Juan Mariano Fuentes (en PDF)
elrincondeajax.com
Taller Ajax
Desarrollo Web
Turorial de Ajax
cristalab.com
Introduccción a Ajax - Javier Eguíluz Pérez
librosweb.es
mini tutorial de Ajax
Bog de Ale Muñoz en Sofa Naranja.
Using POST method in XMLHTTPRequest
Artículo de openjs.com
Tip Para Solucionar Problema con Acentos al Utilizar AJAX
webadictos.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




AJAX (VI)

Archivos XML

imagen ajax

Lo que debemos saber

Para poder seguir las explicaciones de esta página se supone que tenemos que tener una serie de conocimientos previos, aparte de los generales para construir una página web (HTML y CSS), aunque sea de forma básica. Estos son los siguientes:

La forma de acceder al archivo XML en ajax es igual a la explicada en el manual de DOM. Ahí también se usa el objeto XMLHttpRequest, pero de forma síncrona. Aquí con ajax se utiliza la misma forma de transferir los archivos XML, pero de forma asincrona. Basta con cambiar el tercer parámetro del método open de false a true para utilizarlo con ajax.


Método para cargar el archivo

Vamos a seguir utilizando el ObjetoAjax creado en páginas anteriores para facilitar el trabajo. Evidentemente no podemos utilizar el método pedirTexto creado en la página anterior para obtener los archivos XML, ya que lo que obtendríamos sería un texto plano, y no el DOM del archivo. Por lo tanto crearemos un nuevo método en el objeto ObjetoAjax que nos devuelva el objeto DOM del archivo XML.

En este nuevo método pasaremos como parámetros la url del archivo y el nombre de una función que crearemos luego. Esta última funcion llevará un primer parámetro, en el cual pasaremos el objeto DOM del archivo XML.

Para crear este método primero modificamos la función constructora (en el archivo objetoAjax.js) añadiendole una línea.

function ObjetoAjax () {
     var nuevoajax=creaObjetoAjax()
     this.objeto=nuevoajax;
     this.pedirTexto=pedirTextoAjax;
     this.cargaXML=cargarXML
     }	

En negrita y azul oscuro viene indicada la nueva línea que hemos añadido.

Con esto hemos indicado cómo se llamará el nuevo método que estamos creando. ahora debemos crear la función que indica qué es lo que debe hacer este método.

Para ello en el archivo objetoAjax.js añadiremos la siguiente función:

/*función del método cargaXML: devuelve el DOM del XML	
como parámetro de la función que le pasamos*/
function cargarXML(url,funcion) {
     var nuevoajax=this.objeto; //crear objeto XMLHttpRequest
     var funcionXML=funcion //recoger función
     nuevoajax.open("GET",url,true); //preparar el envio
     nuevoajax.onreadystatechange=function() { //al cargarse el archivo...
        if (nuevoajax.readyState==4) {
           propiedad=nuevoajax.responseXML; //recoger el DOM
           funcionXML(propiedad); //devolverlo como parámetro.
           }
        }	
     nuevoajax.send();envio
     }

Con esto en el javascript de la página, una vez instanciado el objeto, llamaremos al método objeto.cargaXML(), en el que pasaremos como parámetros la url del archivo XML y una función que crearemos luego y en la que recogemos como parámetro el objeto DOM del archivo XML.

Como diferencia con la función pedirTextoAjax vista en la página anterior, vemos que sólo comprobamos el "readyState", y no comprobamos el "status". Esto es porque en realidad el archivo xml no es una página, sino sólamente eso, un archivo al que llamamos para luego insertarlo en la página.

Antes de hacer un ejemplo para comprobar que el método funciona, indicaremos cómo ha quedado el archivo objetoAjax.js. Para no alargar demasiado la página podemos ver el código completo en el siguiente enlace:

Archivo objetoAjax.js (3)



Ejemplo de archivo XML

La mejor manera de comprobar que el código anterior funciona perfectamente es mediante un ejemplo. Empezaremos por crear un archivo XML, al cual llamaremos ejemplo4.xml:

<?xml version="1.0" encoding="iso-8859-15"?>
<agenda>
  <nombre>Fernando</nombre>
  <apellido>Rodríguez Galán</apellido>
  <telefono>645221883</telefono>
  <email>ferrog@gmail.com</email>
</agenda>

Continuaremos creando el archivo HTML. En él pondremos un link al archivo objetoAjax.js, y otro al archivo javascript de la página, el cual llamaremos ejemplo4.js.

También habra un contenedor "div" con un indicador "id" que indique dónde debe insertarse el contenido del archivo XML. Este será el archivo HTML ejemplo4.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo 3</title>
<script type="text/javascript" src="objetoAjax.js"></script>
<script type="text/javascript" src="ejemplo4.js"></script>
</head>
<body>
<h1>Datos de documento XML con ajax.</h1>
<div id="contenido"></div>
</body>
</html>

Ya sólo nos queda crear el archivo ejemplo4.js que contendrá el código javascript para la página. Éste será el siguiente:

docObjeto= new ObjetoAjax(); //instanciar objeto
docObjeto.cargaXML("ejemplo4.xml",recogeDatos); //método para XML-DOM
function recogeDatos(xmlDoc) { //El parámetro contiene el DOM del XML
       //elemento de la página donde insertar el archivo.
       respuesta=document.getElementById("contenido");
       //A partir del DOM obtenemos los distintos nodos del archivo:
       //extraemos el contenido de la primera etiqueta "nombre" del XML
       minombre=xmlDoc.getElementsByTagName("nombre")[0].childNodes[0].nodeValue;
       //escribimos el resultado en la página
       respuesta.innerHTML="<p>Nombre :"+minombre+"</p>";
       //hacemos lo mismo para el resto de etiquetas.
       miapellido=xmlDoc.getElementsByTagName("apellido")[0].childNodes[0].nodeValue;
       respuesta.innerHTML+="<p>Apellido :"+miapellido+"</p>";
       mitelefono=xmlDoc.getElementsByTagName("telefono")[0].childNodes[0].nodeValue;
       respuesta.innerHTML+="<p>Teléfono :"+mitelefono+"</p>";
       miemail=xmlDoc.getElementsByTagName("email")[0].childNodes[0].nodeValue;
       respuesta.innerHTML+="<p>E-mail :"+miemail+"</p>";
    }

El resultado del ejemplo se puede ver en el siguiente enlace a la página HHML:

Ejemplo 4


Aquí en la función recogeDatos ponemos un primer argumento, en el cual recogemos el DOM del archivo XML. Utilizamos después los diferentes métodos del DOM para extraer los datos del contenido de los nodos, tal como se explica en el manual de DOM.






En la siguiente página veremos cómo incluir otros tipos de archivo mediante ajax.

Otros Archivos.



Manual de Ajax

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com