XMLHttpRequest() 不断返回 undefined
[英]XMLHttpRequest() keeps returning back undefined
问题描述
I am attemping to do the tutorial from MDN called 'XMLHttpRequest'.
我正在尝试从 MDN 中完成名为“XMLHttpRequest”的教程。 However, the request.open('GET', url) keeps returning back undefined when I try to use it on a txt file in the local directory.但是，当我尝试在本地目录中的txt文件上使用request.open('GET', url)时，它一直返回 undefined 。 I consoled logged the url and request and they come back fine.我安慰记录了url和request ，他们回来了。 Below is my code along with the txt file I am trying to use for this project which is in the local directory using VS code as an editor along with the live servor Port: 5500.下面是我的代码以及我试图用于此项目的txt文件，该文件位于本地目录中，使用 VS 代码作为编辑器以及实时伺服器端口：5500。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Ajax starting point</title>
<style>
html,
pre {
font-family: sans-serif;
}
body {
width: 500px;
margin: 0 auto;
background-color: #ccc;
}
pre {
line-height: 1.5;
letter-spacing: 0.05rem;
padding: 1rem;
background-color: white;
}
label {
width: 200px;
margin-right: 33px;
}
select {
width: 350px;
padding: 5px;
}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<h1>Ajax starting point</h1>
<form>
<label for="verse-choose">Choose a verse</label>
<select id="verse-choose" name="verse-choose">
<option>Verse 1</option>
<option>Verse 2</option>
<option>Verse 3</option>
<option>Verse 4</option>
</select>
</form>
<h2>The Conqueror Worm, <em>Edgar Allen Poe, 1843</em></h2>
<pre>
</pre>
<script>
const verseChoose = document.querySelector('select');
const poemDisplay = document.querySelector('pre');
verseChoose.onchange = function() {
const verse = verseChoose.value;
updateDisplay(verse);
};
function updateDisplay(verse) {
verse = verse.replace(" ", "");
verse = verse.toLowerCase();
let url = verse + '.txt';
let request = new XMLHttpRequest();
console.log(url);
console.log(request);
request.open('GET', url);
console.log(request.open('GET', url))
request.responseType = 'text';
request.onload = function() {
poemDisplay.textContent = request.response;
request.send();
};
}
updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';
</script>
</body>
</html>
verse1.txt (in local directory) verse1.txt（在本地目录中）
Lo! 'tis a gala night
Within the lonesome latter years!
An angel throng, bewinged, bedight
In veils, and drowned in tears,
Sit in a theatre, to see
A play of hopes and fears,
While the orchestra breathes fitfully
The music of the spheres.
Mimes, in the form of God on high,
Mutter and mumble low,
And hither and thither fly-
Mere puppets they, who come and go
At bidding of vast formless things
That shift the scenery to and fro,
Flapping from out their Condor wings
Invisible Woe!
3 个解决方案
解决方案1
1 已采纳 2020-11-16 04:43:08
Simply move the send call in the correct position as follows:只需将发送调用移动到正确的位置，如下所示：
function updateDisplay(verse) {
verse = verse.replace(" ", "");
verse = verse.toLowerCase();
let url = verse + '.txt';
let request = new XMLHttpRequest();
console.log(url);
console.log(request);
request.open('GET', url);
console.log(request.open('GET', url))
request.responseType = 'text';
request.onload = function() {
poemDisplay.textContent = request.response;
};
request.send();
}
解决方案2
0 2020-11-16 04:43:38
It looks like you are not sending the request at the right time.您似乎没有在正确的时间发送请求。 Let me know if this works:让我知道这个是否奏效：
function updateDisplay(verse) {
verse = verse.replace(" ", "");
verse = verse.toLowerCase();
let url = verse + '.txt';
let request = new XMLHttpRequest();
console.log(url);
console.log(request);
request.open('GET', url);
console.log(request.open('GET', url))
request.responseType = 'text';
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
poemDisplay.textContent = request.response;
};
request.send();
}
解决方案3
0 2021-03-05 22:05:32
"request.send();" “请求。发送（）；” should be before "request.onload", because "send" is "question" and "onload" is "answer".应该在“request.onload”之前，因为“send”是“question”而“onload”是“answer”。
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'text';
request.send();
request.onload = function()
{
poemDisplay.textContent = request.response;
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.