| 
| gliba 14.12.2008 00:52
Xml-файлы для хранения управляющих параметров становятся все более популярными. Это связано с увеличением быстродействия компьютеров и, как следствие, ускорением разбора файлов. Кроме того, современные браузеры имеют встроенные xml-парсеры (модули разбора файлов). Рассмотрим для примера, что Xml-файл содержит информацию для показа фотографий или картинок. Загрузив и разобрав этот файл, можно показывать картинки без перегрузки страницы. Тот же самый код можно использовать в разных страницах. Меняется только содержимое xml-файла.
Например, такой xml-файл может использоваться для показа 3-х картинок.
<?xml version="1.0" encoding="UTF-8"?>
<wordlist title="Авангард">
<word id="7" text="Мой блог" image="images/bayan7.jpg" />
<word id="8" text="Кокс" image="images/nark_01.jpg" />
<word id="9" text="НАТО" image="images/NATO_welcome_4.jpg" />
</wordlist>
Названия тегов и атрибутов произвольные. Пример страницы, использующей этот файл, приведен ниже. А здесь демо.
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Slide show</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var sFilename = 'words.xml';
var arrText = new Array();
var arrImage = new Array();
var total = 0;
var cur = 0;
var xmlhttp = null;
var xml = null;
function xml_load( file )
{
try //Internet Explorer
{
xml = new ActiveXObject("Microsoft.XMLDOM");
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xml = document.implementation.createDocument("","",null);
}
catch(e)
{
alert(e.message);
return;
}
}
xml.async = false;
try
{
xml.load(file);
}
catch(e)
{ //Safari
xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET',file,false);
xmlhttp.send();
xml = xmlhttp.responseXML.documentElement;
}
parse();
}
function parse()
{
var list = xml.getElementsByTagName("wordlist");
document.getElementById( "head01" ).innerHTML = list[0].getAttribute("title");
var word = xml.getElementsByTagName("word");
for( var i = 0; i < word.length; i++ )
{
arrText[ i ] = word[ i ].getAttribute("text");
arrImage[ i ] = word[ i ].getAttribute("image");
}
total = i;
show( 0 );
}
function prev()
{
if( cur > 0 ) show( cur - 1 );
}
function next()
{
if( cur < total - 1 ) show( cur + 1 );
}
function show( i )
{
cur = i;
document.getElementById( "text" ).innerHTML = arrText[ i ];
document.getElementById( "counter" ).innerHTML = ( i + 1 ) + " из " + total;
document.getElementById( "image" ).src = arrImage[ i ];
}
</script>
</head>
<body onload="xml_load(sFilename)">
<div style="float:left; border: 1px solid #ddd; width: 160px;" align="center">
<h1 id="head01">Test</h1>
<input type="button" value=" < " onclick="prev()" id=button1 name=button1>
<span id="counter" style="width:100px"> </span>
<input type="button" value=" > " onclick="next()" id=button2 name=button2>
<br>
<br>
<span id="text" style="font-size:16pt"></span>
<br>
<img id="image" src="" alt=''>
</div> , как много в этом слове...
</body>
</html>
КомментарииКогда страница загружена в браузера и готова к отображению, обработчик onload вызывает функцию xml_load(). Эта функция активирует xml-парсер (разные браузеры требуют разного кода), загружает в него файл, имя которого содержится в переменной sFilename. Затем вызывается функция parse, которая с помощью функции xml.getElementsByTagName находит теги xml-файла, затем используя getAttribute выделяет заголовок и список текстов и адресов картинок, которые помещаются в массивы arrText и arrImage соответственно. При нажатии на кнопки происходит переход на следущий или предыдущий слайд.
 |