Чтение XML

Автор: Евгений Рыжков Дата публикации: 27.08.2010

Задача

Прочитать xml-файл находящийся на сервере.

Теория

Javascript — язык для создания динамических сценариев на клиентской стороне. Т.е. напрямую работать с файлами, находящимися на сервере (да и на компьютере пользователя) он не может. Обычно для таких целей используются серверные языки (php, asp т.п.). Но бывают ситуации, когда нужно (удобней, проще) прочитать файл с помощью javascript, не прибегая к помощи серверных скриптов.

Допустим на сервере имеется файл data.xml, содержимое которого нужно прочитать и вставить в HTML страницу. data.xml:

<?xml version="1.0" encoding="utf-8"?>
 <sites>
   <site>
     <title>W3C</title>
	<url>http://www.w3c.org/</url>
     <desc>there are web standards</desc>
   </site>
   <site>
     <title>Mozilla</title>
	<url>http://www.mozilla.com/ru/</url>
     <desc>here you can download his latest firefox. and generally learn more about him</desc>
   </site>
   <site>
     <title>msdn</title>
	<url>http://msdn.microsoft.com/en-us/default.aspx</url>
     <desc>information for Web developers from microsoft</desc>
   </site>
 </sites>

Решение

Для решения этой задачи воспользуемся функцией jQuery.ajax() для асинхронного обращения к данным на сервере:

jQuery(document).ready(function(){
		jQuery.ajax({
			type: "GET", // метод передачи данных, можно пропустить - по умолчанию и так get
			url: "data.xml", // путь к файлу, который будем читать
			dataType: "xml", // тип данных, с которыми работаем
			success: function(xml) { // переменная названа xml. ее можно назвать как либо по другому
			/*
				в ответе приходит объект XML.
				чтобы добраться до необходимого узла, используем jQuery-поиск по DOM узлам
				например, var idItem = jQuery(xml).find("#item1").eq(1).attr("id");
			*/
			jQuery(xml).find('site').each(
				function()
				{
						
					var id = jQuery(this).attr('id'),
						title = jQuery(this).find('title').text(),
						url = jQuery(this).find('url').text(),
						desc = jQuery(this).find('desc').text();
					jQuery('<div class="items"></div>').html('<h2><a href="'+url+'">'+title+'</a></h2><p>'+desc+'</p>').appendTo('#xml-data');
				
				});			
				
			}
			
		});
	
});

Демо. Проверено:

Заметка

xml-документ должен быть без ошибок иначе не прочитается.

Материалы