eXtensible Markup Language
Tech Talk by Ruth Naebeck
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
Indeed.com within 5 miles:
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
Dealing with XML files created by others
XML Elements
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
var xhttp = new XMLHttpRequest()
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(xhttp.responseXML)
}
}
xhttp.open("GET", "Animals.xml", true)
xhttp.send()
function myFunction(xml) {
// Custom code here
}
getElementsByTagName
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
Looping / Traversing
puppies = array of nodes
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
Node Relationships
puppies = array of nodes
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>
xPath Solution
document.evaluate xPath
<?xml version="1.0" encoding="UTF-8"?>
<Animals>
<Puppy id="101">
<name>Rover</name>
<breed>Pug</breed>
<color>Brown</color>
<image>rover.jpg</image>
</Puppy>
<Puppy id="102">
<name>Spot</name>
<color>Black and White</color>
<image>spot.jpg</image>
</Puppy>
<!-- Kittens start here -->
<Kitten type="tabby">
<name>Sherry</name>
<color>Orange and White</color>
<image>sherry.jpg</image>
</Kitten>
<Kitten>
<name>Whiskers</name>
<color>Gray</color>
<image>whiskers.jpg</image>
</Kitten>
</Animals>