试图用 javascript 显示来自 xml 的信息
trying to display information from xml with javascript
只想设置一个像 netflix 或 google 这样的搜索引擎，它可以在不刷新的情况下用结果更新我的网页。因此我尝试了很多，这是我的代码。但是代码在 xml 的第一个条目处停止，我不知道为什么。
这是我的html
<html>
<head>
</head>
<body>
<h1>The best films from 1990 to 1999<h1>
<table id="demo"></table>
Search for movie:
<input type="text" id="input" onkeyup="loadXml()">
<script>
function loadXml() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "mediathek.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Film</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>";
var x = xmlDoc.getElementsByTagName("film");
var input = document.getElementById("input").value;
var size = input.length;
for (i = 0; i <x.length; i++)
{
startString = name.substring(0,size);
if (startString.toLowerCase() == input.toLowerCase())
{
name=xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
year=xmlDoc.getElementsByTagName("year")[i].childNodes[0].nodeValue;
director=xmlDoc.getElementsByTagName("director")[i].childNodes[0].nodeValue;
length=xmlDoc.getElementsByTagName("length")[i].childNodes[0].nodeValue;
description=xmlDoc.getElementsByTagName("description")[i].childNodes[0].nodeValue;
divText = "<h1>The film details are:</h1><br /><table border=1><tr><th>Name</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>" + "<tr><td>" + name + "</td><td>" + year + "</td><td>" + director + "</td><td>" + length + "</td><td>" + description + "</td></tr>" + "</table>";
break;
}
else
{
divText = divText + "<h2>The film does not exist.</h2>";
}
}
document.getElementById("results").innerHTML= divText;
}
</script>
<div id="results" />
</body>
</html>
这是 xml
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<mediathek>
<films>
<film label="Pulp Fiction">
<name>Pulp Fiction</name>
<year>1994</year>
<director>Quentin Tarantino</director>
<length>154</length>
<description>The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.</description>
</film>
<film label="The Blair Witch Project">
<name>The Blair Witch Project</name>
<year>1999</year>
<director>Daniel Myrick, Eduardo Sanchez</director>
<length>81</length>
<description>Three film students vanish after traveling into a Maryland forest to film a documentary on the local Blair Witch legend, leaving only their footage behind.</description>
</film>
<film label="The Shawshank Redemption">
<name>The Shawshank Redemption</name>
<year>1994</year>
<director>Frank Darabont</director>
<length>142</length>
<description>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</description>
</film>
<film label="Saving Private Ryan">
<name>Saving Private Ryan</name>
<year>1998</year>
<director>Steven Spielberg</director>
<length>169</length>
<description>Following the Normandy Landings, a group of U.S. soldiers go behind enemy lines to retrieve a paratrooper whose brothers have been killed in action.</description>
</film>
<film label="The Wedding Singer">
<name>The Wedding Singer</name>
<year>1998</year>
<director>Frank Coraci</director>
<length>95</length>
<description>Robbie, a singer, and Julia, a waitress, are both engaged, but to the wrong people. Fortune intervenes to help them discover each other.</description>
</film>
<film label="Fight Club">
<name>Fight Club</name>
<year>1999</year>
<director>David Fincher</director>
<length>139</length>
<description>An insomniac office worker, looking for a way to change his life, crosses paths with a devil-may-care soap maker, forming an underground fight club that evolves into something much, much more.</description>
</film>
<film label="Titanic">
<name>Titanic</name>
<year>1997</year>
<director>James Cameron</director>
<length>194</length>
<description>A seventeen-year-old aristocrat falls in love with a kind but poor artist aboard the luxurious, ill-fated R.M.S. Titanic.</description>
</film>
<film label="Forrest Gump">
<name>Forrest Gump</name>
<year>1994</year>
<director>Robert Zemeckis</director>
<length>142</length>
<description>Forrest Gump, while not intelligent, has accidentally been present at many historic moments, but his true love, Jenny Curran, eludes him.</description>
</film>
<film label="American Pie">
<name>American Pie</name>
<year>1999</year>
<director>Paul Weitz, Chris Weitz</director>
<length>95</length>
<description>Four teenage boys enter a pact to lose their virginity by prom night.</description>
</film>
<film label="Independence Day">
<name>Independence Day</name>
<year>1996</year>
<director>Roland Emmerich</director>
<length>145</length>
<description>The aliens are coming and their goal is to invade and destroy Earth. Fighting superior technology, mankind's best weapon is the will to survive.</description>
</film>
<film label="Goodfellas">
<name>Goodfellas</name>
<year>1990</year>
<director>Martin Scorsese</director>
<length>146</length>
<description>Henry Hill and his friends work their way up through the mob hierarchy.</description>
</film>
<film label="American Beauty">
<name>American Beauty</name>
<year>1999</year>
<director>Sam Mendes</director>
<length>122</length>
<description>A sexually frustrated suburban father has a mid-life crisis after becoming infatuated with his daughter's best friend.</description>
</film>
<film label="Schindler's List">
<name>Schindler's List</name>
<year>1993</year>
<director>Steven Spielberg</director>
<length>195</length>
<description>In German-occupied Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazi Germans.</description>
</film>
<film label="The Usual Suspects">
<name>The Usual Suspects</name>
<year>1995</year>
<director>Bryan Singer</director>
<length>106</length>
<description>A sole survivor tells of the twisty events leading up to a horrific gun battle on a boat, which begin when five criminals meet at a seemingly random police lineup.</description>
</film>
<film label="The Silence of the Lambs">
<name>The Silence of the Lambs</name>
<year>1991</year>
<director>Jonathan Demme</director>
<length>118</length>
<description>A young F.B.I. cadet must confide in an incarcerated and manipulative killer to receive his help on catching another serial killer who skins his victims.</description>
</film>
<film label="The Big Lebowski">
<name>The Big Lebowski</name>
<year>1998</year>
<director>Joel Coen, Ethan Coen</director>
<length>117</length>
<description>"The Dude" Lebowski, mistaken for a millionaire Lebowski, seeks restitution for his ruined rug and enlists his bowling buddies to help get it.</description>
</film>
<film label="The Matrix">
<name>The Matrix</name>
<year>1999</year>
<director>Lana Wachowski, Lilly Wachowski</director>
<length>136</length>
<description>A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.</description>
</film>
<film label="Leon: The Professional">
<name>Leon: The Professional</name>
<year>1994</year>
<director>Luc Besson</director>
<length>110</length>
<description>Mathilda, a 12-year-old girl, is reluctantly taken in by Léon, a professional assassin, after her family is murdered. Léon and Mathilda form an unusual relationship, as she becomes his protégée and learns the assassin's trade.</description>
</film>
<film label="Beauty and the Beast">
<name>Beauty and the Beast</name>
<year>1991</year>
<director>Gary Trousdale, Kirk Wise</director>
<length>84</length>
<description>Belle, whose father is imprisoned by the Beast, offers herself instead, unaware her captor to be an enchanted prince.</description>
</film>
<film label="Se7en">
<name>Se7en</name>
<year>1995</year>
<director>David Fincher</director>
<length>127</length>
<description>Two detectives, a rookie and a veteran, hunt a serial killer who uses the seven deadly sins as his modus operandi.</description>
</film>
</films>
</mediathek>
找到匹配的电影后有一个 break 语句，因此循环永远不会遍历剩余的电影。
function loadXml() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this.responseXML);
}
};
xhttp.open("GET", "mediathek.xml", true);
xhttp.send();
}
function myFunction(xmlDoc) {
var tableHead = "<tr><th>Name</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>";
var x = xmlDoc.getElementsByTagName("film");
var input = document.getElementById("input").value;
var size = input.length;
var filmFound = false;
var divText = "";
var tableRows = "";
var name, year, director, length, description, startString;
if (input.length < 1) return;
for (var i = 0; i < x.length; i++) {
name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
startString = name.substring(0, size);
if (startString.toLowerCase() == input.toLowerCase()) {
filmFound = true;
year = xmlDoc.getElementsByTagName("year")[i].childNodes[0].nodeValue;
director = xmlDoc.getElementsByTagName("director")[i].childNodes[0].nodeValue;
length = xmlDoc.getElementsByTagName("length")[i].childNodes[0].nodeValue;
description = xmlDoc.getElementsByTagName("description")[i].childNodes[0].nodeValue;
tableRows += "<tr><td>" + name + "</td><td>" + year + "</td><td>" + director + "</td><td>" + length + "</td><td>" + description + "</td></tr>";
}
}
if (filmFound) {
divText = "<h1>The film details are:</h1><br /><table border=1>" + tableHead + tableRows + "</table>";
} else {
divText = "<h2>The film does not exist.</h2>";
}
document.getElementById("results").innerHTML = divText;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<h1>The best films from 1990 to 1999</h1>
</div>
<div class="container">
<table id="demo"></table>
</div>
<div class="container">
Search for movie:
<input type="text" id="input" onkeyup="loadXml()">
</div>
<div class="container" id="results"></div>
只想设置一个像 netflix 或 google 这样的搜索引擎，它可以在不刷新的情况下用结果更新我的网页。因此我尝试了很多，这是我的代码。但是代码在 xml 的第一个条目处停止，我不知道为什么。
这是我的html
<html>
<head>
</head>
<body>
<h1>The best films from 1990 to 1999<h1>
<table id="demo"></table>
Search for movie:
<input type="text" id="input" onkeyup="loadXml()">
<script>
function loadXml() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "mediathek.xml", true);
xhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Film</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>";
var x = xmlDoc.getElementsByTagName("film");
var input = document.getElementById("input").value;
var size = input.length;
for (i = 0; i <x.length; i++)
{
startString = name.substring(0,size);
if (startString.toLowerCase() == input.toLowerCase())
{
name=xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
year=xmlDoc.getElementsByTagName("year")[i].childNodes[0].nodeValue;
director=xmlDoc.getElementsByTagName("director")[i].childNodes[0].nodeValue;
length=xmlDoc.getElementsByTagName("length")[i].childNodes[0].nodeValue;
description=xmlDoc.getElementsByTagName("description")[i].childNodes[0].nodeValue;
divText = "<h1>The film details are:</h1><br /><table border=1><tr><th>Name</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>" + "<tr><td>" + name + "</td><td>" + year + "</td><td>" + director + "</td><td>" + length + "</td><td>" + description + "</td></tr>" + "</table>";
break;
}
else
{
divText = divText + "<h2>The film does not exist.</h2>";
}
}
document.getElementById("results").innerHTML= divText;
}
</script>
<div id="results" />
</body>
</html>
这是 xml
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<mediathek>
<films>
<film label="Pulp Fiction">
<name>Pulp Fiction</name>
<year>1994</year>
<director>Quentin Tarantino</director>
<length>154</length>
<description>The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.</description>
</film>
<film label="The Blair Witch Project">
<name>The Blair Witch Project</name>
<year>1999</year>
<director>Daniel Myrick, Eduardo Sanchez</director>
<length>81</length>
<description>Three film students vanish after traveling into a Maryland forest to film a documentary on the local Blair Witch legend, leaving only their footage behind.</description>
</film>
<film label="The Shawshank Redemption">
<name>The Shawshank Redemption</name>
<year>1994</year>
<director>Frank Darabont</director>
<length>142</length>
<description>Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.</description>
</film>
<film label="Saving Private Ryan">
<name>Saving Private Ryan</name>
<year>1998</year>
<director>Steven Spielberg</director>
<length>169</length>
<description>Following the Normandy Landings, a group of U.S. soldiers go behind enemy lines to retrieve a paratrooper whose brothers have been killed in action.</description>
</film>
<film label="The Wedding Singer">
<name>The Wedding Singer</name>
<year>1998</year>
<director>Frank Coraci</director>
<length>95</length>
<description>Robbie, a singer, and Julia, a waitress, are both engaged, but to the wrong people. Fortune intervenes to help them discover each other.</description>
</film>
<film label="Fight Club">
<name>Fight Club</name>
<year>1999</year>
<director>David Fincher</director>
<length>139</length>
<description>An insomniac office worker, looking for a way to change his life, crosses paths with a devil-may-care soap maker, forming an underground fight club that evolves into something much, much more.</description>
</film>
<film label="Titanic">
<name>Titanic</name>
<year>1997</year>
<director>James Cameron</director>
<length>194</length>
<description>A seventeen-year-old aristocrat falls in love with a kind but poor artist aboard the luxurious, ill-fated R.M.S. Titanic.</description>
</film>
<film label="Forrest Gump">
<name>Forrest Gump</name>
<year>1994</year>
<director>Robert Zemeckis</director>
<length>142</length>
<description>Forrest Gump, while not intelligent, has accidentally been present at many historic moments, but his true love, Jenny Curran, eludes him.</description>
</film>
<film label="American Pie">
<name>American Pie</name>
<year>1999</year>
<director>Paul Weitz, Chris Weitz</director>
<length>95</length>
<description>Four teenage boys enter a pact to lose their virginity by prom night.</description>
</film>
<film label="Independence Day">
<name>Independence Day</name>
<year>1996</year>
<director>Roland Emmerich</director>
<length>145</length>
<description>The aliens are coming and their goal is to invade and destroy Earth. Fighting superior technology, mankind's best weapon is the will to survive.</description>
</film>
<film label="Goodfellas">
<name>Goodfellas</name>
<year>1990</year>
<director>Martin Scorsese</director>
<length>146</length>
<description>Henry Hill and his friends work their way up through the mob hierarchy.</description>
</film>
<film label="American Beauty">
<name>American Beauty</name>
<year>1999</year>
<director>Sam Mendes</director>
<length>122</length>
<description>A sexually frustrated suburban father has a mid-life crisis after becoming infatuated with his daughter's best friend.</description>
</film>
<film label="Schindler's List">
<name>Schindler's List</name>
<year>1993</year>
<director>Steven Spielberg</director>
<length>195</length>
<description>In German-occupied Poland during World War II, Oskar Schindler gradually becomes concerned for his Jewish workforce after witnessing their persecution by the Nazi Germans.</description>
</film>
<film label="The Usual Suspects">
<name>The Usual Suspects</name>
<year>1995</year>
<director>Bryan Singer</director>
<length>106</length>
<description>A sole survivor tells of the twisty events leading up to a horrific gun battle on a boat, which begin when five criminals meet at a seemingly random police lineup.</description>
</film>
<film label="The Silence of the Lambs">
<name>The Silence of the Lambs</name>
<year>1991</year>
<director>Jonathan Demme</director>
<length>118</length>
<description>A young F.B.I. cadet must confide in an incarcerated and manipulative killer to receive his help on catching another serial killer who skins his victims.</description>
</film>
<film label="The Big Lebowski">
<name>The Big Lebowski</name>
<year>1998</year>
<director>Joel Coen, Ethan Coen</director>
<length>117</length>
<description>"The Dude" Lebowski, mistaken for a millionaire Lebowski, seeks restitution for his ruined rug and enlists his bowling buddies to help get it.</description>
</film>
<film label="The Matrix">
<name>The Matrix</name>
<year>1999</year>
<director>Lana Wachowski, Lilly Wachowski</director>
<length>136</length>
<description>A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.</description>
</film>
<film label="Leon: The Professional">
<name>Leon: The Professional</name>
<year>1994</year>
<director>Luc Besson</director>
<length>110</length>
<description>Mathilda, a 12-year-old girl, is reluctantly taken in by Léon, a professional assassin, after her family is murdered. Léon and Mathilda form an unusual relationship, as she becomes his protégée and learns the assassin's trade.</description>
</film>
<film label="Beauty and the Beast">
<name>Beauty and the Beast</name>
<year>1991</year>
<director>Gary Trousdale, Kirk Wise</director>
<length>84</length>
<description>Belle, whose father is imprisoned by the Beast, offers herself instead, unaware her captor to be an enchanted prince.</description>
</film>
<film label="Se7en">
<name>Se7en</name>
<year>1995</year>
<director>David Fincher</director>
<length>127</length>
<description>Two detectives, a rookie and a veteran, hunt a serial killer who uses the seven deadly sins as his modus operandi.</description>
</film>
</films>
</mediathek>
找到匹配的电影后有一个 break 语句，因此循环永远不会遍历剩余的电影。
function loadXml() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this.responseXML);
}
};
xhttp.open("GET", "mediathek.xml", true);
xhttp.send();
}
function myFunction(xmlDoc) {
var tableHead = "<tr><th>Name</th><th>Year</th><th>Director</th><th>Length</th><th>Description</th></tr>";
var x = xmlDoc.getElementsByTagName("film");
var input = document.getElementById("input").value;
var size = input.length;
var filmFound = false;
var divText = "";
var tableRows = "";
var name, year, director, length, description, startString;
if (input.length < 1) return;
for (var i = 0; i < x.length; i++) {
name = xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue;
startString = name.substring(0, size);
if (startString.toLowerCase() == input.toLowerCase()) {
filmFound = true;
year = xmlDoc.getElementsByTagName("year")[i].childNodes[0].nodeValue;
director = xmlDoc.getElementsByTagName("director")[i].childNodes[0].nodeValue;
length = xmlDoc.getElementsByTagName("length")[i].childNodes[0].nodeValue;
description = xmlDoc.getElementsByTagName("description")[i].childNodes[0].nodeValue;
tableRows += "<tr><td>" + name + "</td><td>" + year + "</td><td>" + director + "</td><td>" + length + "</td><td>" + description + "</td></tr>";
}
}
if (filmFound) {
divText = "<h1>The film details are:</h1><br /><table border=1>" + tableHead + tableRows + "</table>";
} else {
divText = "<h2>The film does not exist.</h2>";
}
document.getElementById("results").innerHTML = divText;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<h1>The best films from 1990 to 1999</h1>
</div>
<div class="container">
<table id="demo"></table>
</div>
<div class="container">
Search for movie:
<input type="text" id="input" onkeyup="loadXml()">
</div>
<div class="container" id="results"></div>