Parsear un XML mediante AJAX y jQuery
Realizando investigaciones para un proyecto, me he encontrado con la problemática de las llamadas AJAX mediante jQuery. Con esta herramienta es muy fácil realizar dichas peticiones ya que invocando al método
$.ajax()
lo tenemos chupado.
Bueno, empecemos por el principio. Para poder realizar una llamada AJAX mediante la librería jQuery existen 3 métodos:
-
$.get()
Éste método realiza una petición GET al servidor. -
$.post()
Con este método realizamos llamadas POST al servidor, como por ejemplo cuando hacemos el envío de datos de un formulario. -
$.ajax()
Es el método genérico de AJAX en el cual deberemos especificar el método a utilizar, que por defecto es GET.
Emplearemos para este ejemplo el método
$.ajax()
para que se pueda ver de una forma clara como funciona. Hemos descartado los otros dos debido a que son unas abreviaciones de dicho método
Para realizar un ejemplo de petición Ajax, escribiremos lo siguiente:
$.ajax({ //Tipo de peticion que se va a realizar. type: "GET", //URL en la cual vamos a obtener el fichero XML. url: "/path/to/file.xml", //Tipo de datos que nos va a retornar (aquí puede variar entre JSON, HTML, SCRIPT o XML). dataType: "xml", //Función que desencadenará cuando los datos se hayan recibido correctamente. // xml: Es esl argumento donde se reciben los datos. succes: function (xml){ //De esta forma capturamos el objeto con la etiqueta var elements = $(xml).find('ns\\:nombre, nombre'); //Mostramos por pantalla su contenido console.log(elements); } });
Nota: Si realizamos peticiones desde nuestro servidor local a una URL probablemente nos de error a la hora de obtener los datos. Esta situación es debida a que los navegadores bloquean las peticiones realizadas mediante Cross-Browser, únicamente se salvan las realizadas mediante JSONP.
Si nuestro XML contiene "namespaces" la cosa se complica un poco, ya que los navegadores no lo interpretan de la misma forma. La única manera que he podido averiguar que sirva para todos los navegadores es utilizar la siguiente línea de código (siguiendo el ejemplo anterior).
$(xml).find('ns\\:nombre, nombre');
Versiones probadas:
- Google Chrome: 26.0
- Librería jQuery: 2.0