eXtensible Markup Language

 

Tech Talk by Ruth Naebeck

Agenda

  • Introduction to XML
  • Creating XMLs
  • Extracting Data from XMLs

What is XML?

  • Markup Language

 

  • No pre-defined tags

 

  • Does nothing
<?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 Job Search

Indeed.com within 5 miles:

XML Uses

  • Complement HTML

 

  • Transaction Data

 

  • Data Transformation

Creating XML Files

XML Tree

  • Root (required)

 

  • Parent

 

  • Child

 

  • Sibling
<?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 Element

  • Contents

 

  • Empty Elements:
    • <empty attribute="value" />

 

  • Naming Rules

 

  • Extensible
<?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 Attributes

  • Must be Quoted

 

  • No Rules

 

  • Things to Consider

 

  • Recommended Use
<?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 Data Extraction

Dealing with XML files created by others

XML DOM

XML Elements

XML Nodes

  • Document
  • Elements
  • Text
  • Attributes
  • Comments
<?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>

Accessing Nodes

  • XMLHttpRequest
  • getElementsByTagName
  • Looping / Traversing
  • Node Relationships
  • xPath

XMLHttpRequest

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

  • childNodes[1] = name node
    • childNode[0] = text node
      • nodeValue = text
<?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

  • firstElementChild = name node
    • firstChild = text node
      • nodeValue = text
<?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

  • Selecting Nodes
  • Predicates
  • Wildcards
  • xmlDoc.selectNodes
  • xmlDoc.evaluate

xPath Solution

document.evaluate xPath

  • returns xPathResult
    • iterateNext method
    • innerHTML
<?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>

Conclusion

  • Introduction to XML
  • Creating XMLs
  • Extracting Data from XMLs

Thank You!

TechTalk

By ruthnaebeck

Made with Slides.com

TechTalk

XML (eXtensible Markup Language)

  • 307

More from ruthnaebeck