Чтение XML файлов c jQuery
Дата публикации: 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-документ должен быть без ошибок иначе не прочитается.