Do testowania (uruchamiania) na komputerze domowym polecam zainstalowanie: XAMPP [ Introduction to XAMPP ] [ How to Install XAMPP Server on Windows ... ]
Po instalacji XAMPP'a w katalogu "roboczym" o nazwie: htdocs umieszczasz swoje pliki np.: tak
(w Moim przypadku XAMPP zainstalowany jest na dysku E:)
departments.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<department>
<id>1</id>
<code>code_1</code>
<capital>capital_1</capital>
<region>region_1</region>
<name>name_1</name>
</department>
<department>
<id>2</id>
<code>code_2</code>
<capital>capital_2</capital>
<region>region_2</region>
<name>name_2</name>
</department>
<department>
<id>3</id>
<code>code_3</code>
<capital>capital_3</capital>
<region>region_3</region>
<name>name_3</name>
</department>
<department>
<id>4</id>
<code>code_4</code>
<capital>capital_4</capital>
<region>region_4</region>
<name>name_4</name>
</department>
</root>
bazy_danych.html [pozostawiłem Twoje "stylowanie" css]
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Bazy Danych</title>
<style type="text/css">
#baner {
color: white;
background-color: red;
padding: 20px;
text-align: center;
font-family: Arial;
}
#panel_lewy {
width: 100%;
text-align: center;
height: 1500px;
clear: both;
float: left;
background-color: white;
padding-top: 10px;
}
#stopka {
color: white;
background-color: blue;
padding: 10px;
text-align: center;
font-family: Arial;
clear: both;
}
a {
color: white;
}
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="baner"><h1>PLIK XML</h1></div>
<div id="panel_lewy"></div>
<script>
function showInPanel(str) {
const panel = document.getElementById("panel_lewy");
panel.innerHTML = str;
}
function onProgress(e) {
let percent = (e.position / e.totalSize) * 100;
const status = "Pobieram dokument ... " + percent + "%";
showInPanel(status);
}
function onError(e) {
const status = "Błąd podczas pobierania dokumentu\n" + e.target.status;
showInPanel(status);
}
function onLoad(e) {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
const xmlDoc = xmlHttp.responseXML;
const data = xmlDoc.getElementsByTagName("department");
let html = "<table>";
html += "<tr><th>id</th><th>code</th><th>capital</th><th>region</th><th>name</th></tr>";
for (i=0; i<data.length; ++i) {
html += "<tr><td>";
html += data[i].getElementsByTagName("id")[0].childNodes[0].nodeValue;
html += "</td><td>";
html += data[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
html += "</td><td>";
html += data[i].getElementsByTagName("capital")[0].childNodes[0].nodeValue;
html += "</td><td>";
html += data[i].getElementsByTagName("region")[0].childNodes[0].nodeValue;
html += "</td><td>";
html += data[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
html += "</td></tr>";
}
html += "</table>"
showInPanel(html);
} else if (xmlHttp.readyState == 4 && xmlHttp.status == 404) {
const status = "404 - Podany plik <b>xml</b> nie został odnaleźiony w podanej lokalizacji";
showInPanel(status);
}
}
const xmlHttp = new XMLHttpRequest();
xmlHttp.onprogress = onProgress;
xmlHttp.onerror = onError;
xmlHttp.onload = onLoad;
xmlHttp.open("GET", "departments.xml", true);
xmlHttp.overrideMimeType('text/xml');
xmlHttp.send(null);
</script>
</body>
</html>
... możesz pliki xml umieścić tak:
... wtedy zmieniasz kod javascript w tej lini:
z
xmlHttp.open("GET", "departments.xml", true);
na
xmlHttp.open("GET", "xml/departments.xml", true);
... w przeglądarce internetowej w polu adresu wpisujesz: localhost/bazy_danych.html
... nie zapomnij uruchomić serwer z panelu kontrolnego XAMPP
... w tym przykładzie, w kodzie javascript, nieuwzględniony jest problem: Pomijanie pamięci podręcznej tzn., w wielkim skrócie, że po pierwszym pobraniu dokumentu departments.xml i wyświetleniu jego zawartość w przeglądarce, wprowadzone w tym czasie zmiany w dokumencie departments.xml (dodanie kolejnego rekordu, edycja itp.) mogą się nie wyświetlać po ponownym uruchomieniu bazy_danych.html , lecz zostanie wyświetlona zawartość pliku departments.xml, która obecnie znajduje się w pamięci podręczne przeglądarki (cache). Można ręcznie użyć: F5 + Ctrl 
, lub dopisać (zamienić kod):
z:
xmlHttp.open("GET", "departments.xml", true);
na:
let url = "departments.xml";
url += (url.match(/\?/) == null ? '?' : '&') + (new Date()).getTime();
xmlHttp.open("GET", url, true);
z:
xmlHttp.open("GET", "xml/departments.xml", true);
na:
let url = "xml/departments.xml";
url += (url.match(/\?/) == null ? '?' : '&') + (new Date()).getTime();
xmlHttp.open("GET", url, true);
[ XMLHttpRequest ] [ XMLHttpRequest - how can one bypass cache? ]
