Inne działy

 

Aplikacje XML

 

Rozdział ten pokazuje kilka małych aplikacji XML wbudowanych w XML, HTML, XML DOM i JavaScript.


 

Dokument używany w XML

W tej aplikacji będziemy używać pliku "cd_katalog.xml".


 

Wyświetlanie pierwszego elementu CD w elemencie div HTML

Poniższy przykład pobiera dane XML z pierwszego elementu CD i wyświetla je w elemencie HTML z id = "showCD".Funkcja wyswietlCD() jest wywoływana po załadowaniu strony:

Przykład

 

x=xmlDoc.getElementsByTagName("CD");
i=0;

function wyswietlCD()
{
artist=(x[i].getElementsByTagName("ARTYSTA")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TYTUŁ")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("ROK")[0].childNodes[0].nodeValue);
txt="Artysta: " + artysta + "<br />Tytuł: " + tytuł + "<br />Rok: "+ rok;
document.getElementById("showCD").innerHTML=txt;
}

Cały kod przykładowego pliku

 

<!DOCTYPE html>
<html>
<head>

<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_catalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

x=xmlDoc.getElementsByTagName("CD");
i=0;

function wyswietlCD()
{
artist=(x[i].getElementsByTagName("ARTYSTA")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TYTUŁ")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("ROK")[0].childNodes[0].nodeValue);
txt="Artysta: " + artysta + "<br>Tytuł: " + tytuł + "<br>Rok: "+ rok;
document.getElementById("showCD").innerHTML=txt;
}
</script>
</head>
<body onload="wyswietlCD()">

<div id='showCD'></div>

</body>
</html>

 

Nawigacja między CD

Aby przechodzić między elementami CD w powyższym przykładzie, dodamy funkcję next() i previous():

Przykład

 

function next()
{ // wyświetlanie następnego CD, chyba, że jesteś na ostatnim CD
if (i<x.length-1)
  {
  i++;
  wyswietlCD();
  }
}

function previous()
{ // Wyświetla poprzedni CD, chyba, że jesteś na pierwszym CD 
if (i>0)
  {
  i--;
  wyswietlCD();
  }
}

Kod źródłowy pliku:

 

<!DOCTYPE html>
<html>
<head>

<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_katalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

x=xmlDoc.getElementsByTagName("CD");
i=0;

function displayCD()
{
artist=(x[i].getElementsByTagName("ARTYSTA")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TYTUŁ")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("ROK")[0].childNodes[0].nodeValue);
txt="Artysta: " + artysta + "<br>Tytuł: " + tytuł + "<br>Rok: "+ rok;
document.getElementById("showCD").innerHTML=txt;
}

function next()
{
if (i<x.length-1)
  {
  i++;
  displayCD();
  }
}

function previous()
{
if (i>0)
  {
  i--;
  displayCD();
  }
}
</script>
</head>
<body onload="displayCD()">

<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<" />
<input type="button" onclick="next()" value=">>" />

</body>
</html>

Pokaż informacje o albumie, po kliknięciu na CD

Ostatni przykład pokazuje, jak można wyświetlić informacje o albumie, gdy użytkownik kliknie na CD:

Kod źródłowy

 

<!DOCTYPE html>
<html>
<head>
<script>
if (window.XMLHttpRequest)
  {// kod dla IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// kod dla IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","cd_katalog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
x=xmlDoc.getElementsByTagName("CD");

function displayCDInfo(i)
{
artist=(x[i].getElementsByTagName("ARTYSTA")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TYTUŁ")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("ROK")[0].childNodes[0].nodeValue);
country=(x[i].getElementsByTagName("KRAJ")[0].childNodes[0].nodeValue);
company=(x[i].getElementsByTagName("WYTWÓRNIA")[0].childNodes[0].nodeValue);
price=(x[i].getElementsByTagName("CENA")[0].childNodes[0].nodeValue);
txt="Artysta: "+artysta+"<br>Tytuł: "+tytuł+"<br>Rok: "+rok+"<br>Kraj: "+kraj+"<br>Wytwórnia: "+wytwórnia+"<br>Cena: "+cena  ;
document.getElementById("showCD").innerHTML=txt;
}
</script>
</head>

<body>
<div id='showCD'> Kliknij na CD, aby wyświetlić informacje o albumie.</div><br>
<script>
document.write("<table border='1'>");
for (var i=0;i<x.length;i++)
  { 
  document.write("<tr onclick='displayCDInfo(" + i + ")'>");
  document.write("<td>");
  document.write(x[i].getElementsByTagName("ARTYSTA")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TYTUŁ")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.