我的目标：
这是我到目前为止的内容：
<!DOCTYPE html>
<html>
<body>
<div id='showCD'></div><br>
<input type="button" onclick="previous()" value="<<">
<input type="button" onclick="next()" value=">>">
<script>
var i = 0, len;
displayCD(i);
function displayCD(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", 'http://www.example.com/api/search/?query=engines&format=xml', true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("video");
len = x.length;
document.getElementById("showCD").innerHTML =
"Title: " +
x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue +
"<br>Url: " +
x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue +
"<br>Embed code: " +
x[i].getElementsByTagName("embed")[0].childNodes[0].nodeValue;
}
function next() {
if (i < len-1) {
i++;
displayCD(i);
}
}
function previous() {
if (i > 0) {
i--;
displayCD(i);
}
}
</script>
</body>
</html>
这将返回结果，让我用所有正常但繁琐的按钮浏览它们，但是我似乎无法找出一种方法来用值替换“ engines”的值（我上面已将其作为查询参数） '用户输入'。我以为可以为用户输入创建一个带有document.getElementById的变量，然后使用url ='http://www.example.com/api/search/?query='使用url.concat（str1，str2）创建另一个变量，str1 =该变量包含返回的用户输入，而str2 ='＆format = xml'，但效果不佳。
总之，最终目标是：用用户输入的内容代替'引擎'查询参数所在的位置。
我认为我需要使用回调或异步。我是新来的，还在学习。
<body>
...
<span>Please enter a category:</span>
<input type="text" id="category">
<input type="button" value="Search" onclick="search()"
<script>
function search() {
let query = document.getElementById('category').value;
let url = `http://www.example.com/api/search/?query=${query}&format=xml`;
...
xmlhttp.open("GET", url);
xmphttp.send();
}
</script>
</body>