HTML Read XML

1, XML file

<?xml version= "1.0" encoding= "Utf-8"?>
<root>
<person>
<name type= "star" > Wang Hom </name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt; Change Self &gt;&gt;</album>
<age>39</age>
<sex> Men </sex>
</person>
<person>
<name type= "star" > Jay </name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt; I am very busy &gt;&gt;</album>
<age>39</age>
<sex> Men </sex>
</person>
<person>
<name type= "star" > Wang Hom </name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt; Change Self &gt;&gt;</album>
<age>39</age>
<sex> Men </sex>
</person>
<person>
<name type= "star" > Wang Hom </name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt; Change Self &gt;&gt;</album>
<age>39</age>
<sex> Men </sex>
</person>
<person>
<name type= "star" > Wang Hom </name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt; Change Self &gt;&gt;</album>
<age>39</age>
<sex> Men </sex>
</person>
<person>
<name type= "star" > Wang Hom </name>
<photo>./images/wlh.jpg</photo>
<album>&lt;&lt; Change Self &gt;&gt;</album>
<age>39</age>
<sex> Men </sex>
</person>
</root>

2,

<?php

Theoretically, the data is taken out of the database
Generate an XML document from a PHP handler
For the purposes of learning, we have simplified the step-up and created an XML manually

Header (' Content-type:text/xml; Charset=utf-8 ');

Get XML document
$result = file_get_contents ('./stars.xml ');

Returns the XML document
echo $result;

?>

3, Show to page

<script>
var btn = Document.queryselector (' [Type=button] ');

Btn.onclick = function () {

var xhr = new XMLHttpRequest;

Xhr.open (' Get ', ' stars.php ');

Xhr.send (NULL);

Xhr.onreadystatechange = function () {
if (xhr.readystate = = 4 && xhr.status = = 200) {

var result = Xhr.responsetext;

When the returned content is in XML format
var result = Xhr.responsexml;

Console.log (result);

Parsing through the DOM
var persons = Result.getelementsbytagname (' person ');

Console.log (persons.length);

var html = ';
Traversing generated HTML strings
for (var i=0; i<persons.length; i++) {
var name = persons[i].getelementsbytagname (' name ') [0];
var sex = persons[i].getelementsbytagname (' sex ') [0];
var = persons[i].getelementsbytagname (' age ') [0];
var photo = Persons[i].getelementsbytagname (' photo ') [0];
var album = Persons[i].getelementsbytagname (' album ') [0];

HTML + = ' <tr> ';
HTML + = ' <td> ' + name.innerhtml + ' </td> ';
HTML + = ' <td> ' + sex.innerhtml + ' </td> ';
HTML + = ' <td> ' + age.innerhtml + ' </td> ';
HTML + = ' <td> ' + photo.innerhtml + ' </td> ';
HTML + = ' <td> ' + album.innerhtml + ' </td> ';
HTML + = ' </tr> ';
}

Console.log (HTML);
Add a cobbled string to the DOM
Document.queryselector (' table '). InnerHTML = html;
}
}
}
</script>

HTML Read XML