lunes, 18 de noviembre de 2013

Como hacer una petición Ajax a XML con Jquery



Bienvenid@s, hoy veremos como realizar una petición ajax a un archivo XML y extraer la información del mismo. Para ello utilizaremos el método $.ajax de Jquery e iremos accediendo a los datos XML a través del método find() de Jquery.

Si no sabes que es XML, la wikipedia nos dice que es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C) utilizado para almacenar datos de forma legible, es decir, a través de XML podemos almacenar información de un modo estructurado mediante un lenguaje de marcas.

También añadir que XML está muy extendido no sólo en aplicaciones web, sino que también se está utilizando para otras plataformas ya que permite compartir información de un modo sencillo.

Otro punto importante, es que no es nada aconsejable utililzar XML para almacenar información que pueda comprometer la seguridad del sistema.

Para el ejemplo crearemos un par de archivos index.html y ajax.xml.

index.html : será desde donde se realizará la petición ajax al archivo ajax.xml

ajax.xml : almacenará de forma estructurada los datos de una serie de libros.



index.html

<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
 <head>
  <title>Como hacer una petición Ajax a XML con Jquery</title>
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
       <script>
 $(function(){
 
$.ajax({
        type: "GET",
 url: "ajax.xml",
 dataType: "xml",
 success: function(xml) {
 
  $(xml).find("link").each(function(){
  
  autor = $(this).find("author").text();
  libro = $(this).find("book").text();
  info = $(this).find("bookinfo").text();
  fecha = $(this).find("date").text();
  
  $("#content").append("<tr><td>"+autor+"</td><td>"+libro+"</td><td>"+info+"</td><td>"+fecha+"</td></tr>");
  
  });
 
 }
});
 });
 </script>
 </head>
  <body>
<center>
<h1>Como hacer una petición Ajax a XML con Jquery</h1>
<table id="content" border="1" cellpadding="10"><tr><th>Autor</th><th>Libro</th><th>Info</th><th>Fecha</th></tr><table>
</center>
</body> 
</html>


ajax.xml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<listitem>
<link>
<author>Rodolfo</author>
<book>Vive la vida</book>
<bookinfo>Libro que te anima a vivir la vida :)</bookinfo>
<date>06/12/2012</date>
</link>

<link>
<author>Ana</author>
<book>Deja de fumar puros</book>
<bookinfo>Libro que te ayuda a dejar de fumar puros :)</bookinfo>
<date>09/03/2013</date>
</link>

<link>
<author>Fernando</author>
<book>Recolectar setas</book>
<bookinfo>Libro que te enseña como recolectar setas :)</bookinfo>
<date>12/09/2013</date>
</link>
</listitem>




1 comentario:

Anónimo dijo...

Excelente manual bro, me ayudo de mucho!!