javascript - XMLHttpRequest() 不断返回 undefined

问题描述

我正在尝试从 MDN 做名为“XMLHttpRequest”的教程。但是，当我尝试在本地目录中request.open('GET', url)的文件上使用它时，不断返回未定义。txt我安慰记录了他们url，request他们回来了。下面是我的代码以及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（在本地目录中）

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!

标签： javascript

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(); }

javascript - XMLHttpRequest() 不断返回 undefined

问题描述

解决方案

推荐阅读