Hoe gebruik je XML
Maar hoe haal je data uit een XML file met bijvoorbeeld javascript? Ik heb gelezen dat dit kan en ook veel wordt gebruikt.
Als ik bijvoorbeeld een applicatie heb met tientallen dialoogjes (zoals de dialog van jQuery)
Dan hoef ik dus niet bijvoorbeeld tientallen aparte divs te maken. Dan roep je zo'n dialoogje aan met javascript.
Hoe werkt dit? kan iemand me wat uitleg geven?
Gewijzigd op 10/11/2012 18:30:06 door Mark Hogeveen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<!-- tasks.xml -->
<?xml version="1.0" encoding="utf-8" ?>
<tasks>
<task id="1">
<name>Harry helpen op PHPhulp</name>
<time>18:45</time>
</task>
<task id="2">
<name>Uit eten</name>
<time>19:00</time>
</task>
</tasks>
<?xml version="1.0" encoding="utf-8" ?>
<tasks>
<task id="1">
<name>Harry helpen op PHPhulp</name>
<time>18:45</time>
</task>
<task id="2">
<name>Uit eten</name>
<time>19:00</time>
</task>
</tasks>
Nu laad je deze content in met AJAX (voor jQuery jQuery.ajax()). jQuery heeft een speciale XML versie van de AJAX functie die het meteen al omzet voor ons:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$.ajax({
url: 'tasks.xml',
dataType: 'xml',
success: function(result) {
// result bevat nu het XML document
}
});
url: 'tasks.xml',
dataType: 'xml',
success: function(result) {
// result bevat nu het XML document
}
});
Vervolgens kunnen we er gewoon dingen uit selecteren alsof we een element uit een normale HTML document halen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
...,
success: function(result) {
$('#2'); // selecteert <task id="2">...</task>
$('task'); // selecteert alle <task ...>...</task> elementen
$('#2 name'); // selecteert <task id="2"><name>...</name</task>
$('name'); // selecteert alle <name>...</name> elementen
}
});
...,
success: function(result) {
$('#2'); // selecteert <task id="2">...</task>
$('task'); // selecteert alle <task ...>...</task> elementen
$('#2 name'); // selecteert <task id="2"><name>...</name</task>
$('name'); // selecteert alle <name>...</name> elementen
}
});