Javascript – XML bestanden uitlezen
In dit voorbeeld laat ik zien hoe je met een Javascript een XML bestand kan uitlezen.
Hieronder vind je een voorbeeld bestand, welke we gaan uitlezen, je kan een bestand aanmaken en deze inhoud kopiëren en plakken:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<project naam="Mijn project" eigenaar="DomoticX"> <subproject naam="Een subproject" info="Oud"> <tekst>Hallo wereld!</tekst> <datum>2014.01.01</datum> <admin bericht="Dit is het oude project!"/> </subproject> <subproject naam="Tweede subproject" info="Nieuw"> <tekst>Hallo maan!</tekst> <datum>2015.02.02</datum> <admin bericht="Dit is het nieuwe project!"/> </subproject> </project> |
Het Javascript (bijvoorbeeld index.html in dezelfde map) om de XML en de waarden uit te lezen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html> <head> </head> <body> <script> xmlDoc=loadXMLDoc("test.xml"); project_naam = xmlDoc.getElementsByTagName("project")[0].getAttribute("naam"); project_eigenaar = xmlDoc.getElementsByTagName("project")[0].getAttribute("eigenaar"); subproject_naam01 = xmlDoc.getElementsByTagName("subproject")[0].getAttribute("naam"); subproject_info01 = xmlDoc.getElementsByTagName("subproject")[0].getAttribute("info"); subproject_tekst01 = xmlDoc.getElementsByTagName("tekst")[0].childNodes[0].nodeValue; subproject_datum01 = xmlDoc.getElementsByTagName("datum")[0].childNodes[0].nodeValue; subproject_admin01 = xmlDoc.getElementsByTagName("admin")[0].getAttribute("bericht"); subproject_naam02 = xmlDoc.getElementsByTagName("subproject")[1].getAttribute("naam"); subproject_info02 = xmlDoc.getElementsByTagName("subproject")[1].getAttribute("info"); subproject_tekst02 = xmlDoc.getElementsByTagName("tekst")[1].childNodes[0].nodeValue; subproject_datum02 = xmlDoc.getElementsByTagName("datum")[1].childNodes[0].nodeValue; subproject_admin02 = xmlDoc.getElementsByTagName("admin")[1].getAttribute("bericht"); document.write(project_naam + " door: " + project_eigenaar); document.write("<br><br>"); document.write("Subproject: " + subproject_naam01 + " (" + subproject_info01 + ")"); document.write("<br>"); document.write("Datum: " + subproject_datum01); document.write("<br>"); document.write("Tekst: " + subproject_tekst01); document.write("<br>"); document.write("Admin bericht: " + subproject_admin01); document.write("<br><br>"); document.write("Subproject: " + subproject_naam02 + " (" + subproject_info02 + ")"); document.write("<br>"); document.write("Datum: " + subproject_datum02); document.write("<br>"); document.write("Tekst: " + subproject_tekst02); document.write("<br>"); document.write("Admin bericht: " + subproject_admin02); function loadXMLDoc(filename) { if (window.XMLHttpRequest) { xhttp=new XMLHttpRequest(); } else // code for IE5 and IE6 { xhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xhttp.open("GET",filename,false); xhttp.send(); return xhttp.responseXML; } </script> </body> </html> |
Zodra je het bovenstaande script uitvoert, is dit het resultaat:
|
1 2 3 4 5 6 7 8 9 10 11 |
Mijn project door: DomoticX Subproject: Een subproject (Oud) Datum: 2014.01.01 Tekst: Hallo wereld! Admin bericht: Dit is het oude project! Subproject: Tweede subproject (Nieuw) Datum: 2015.02.02 Tekst: Hallo maan! Admin bericht: Dit is het nieuwe project! |