Javascript 文件未在端口 8080 上加载答案

【问题标题】：Javascript file not loading on port 8080Javascript 文件未在端口 8080 上加载
【发布时间】：2019-07-14 20:17:19
【问题描述】：

我刚刚开始后端开发，所以请耐心等待。我这里有一个 javascript 程序，它从我的本地主机获取文本数据。我用节点构建了一个 HTTP 服务器。只是一个普通的 HTTP 服务器，并将它设置到我的根文件夹，其中包含我的 HTML 文件和文本文档。

http-server "C:\users\mycomputer\Desktop\JSTEST"

在命令提示符下。（我使用的是 Windows 10）

当我转到 8080 端口时，它显示 404 未找到并且没有显示我的应用程序，更不用说获取客户端请求的信息了。

我最初尝试设置一个 express,js 服务器，因为我认为它会更容易，但它也不起作用。我还尝试在命令提示符中设置不同的 HTTP 服务器路径。

<!DOCTYPE html>
<html>
<body>

<h2>Using the XMLHttpRequest Object</h2>

<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>

<script>

window.onunload = function() { debugger; }

function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "xmlhttp_info.txt", true);
  xhttp.send();
}

</script>

</body>
</html>

如果页面出现并且在程序中按下按钮后文本变为HELLO（写入txt文件中），效果会很好。

【问题讨论】：

我想添加这是显示的错误：此页面无法正常工作 localhost 发送了无效响应。 ERR_INVALID_REDIRECT 及其在谷歌浏览器上
http-server "C:\users\mycomputer\Desktop\JSTEST" 的输出是什么？ JSTEST文件夹的内容是什么
该命令被写入命令提示符以在该项目文件夹中启动 http-server。内容：jstest（html文件）和xmlhttp_info.txt（标准txt文件），bot在同一个文件夹中。抱歉，输出是：启动 http-server，提供您在以下位置编写的文件路径：127.0.0.1:8080
然后打开 http://127.0.0.1:8080 给你 404？并打开http://127.0.0.1:8080/xmlhttp_info.txt?
这是我在运行上述程序时遇到的错误：此页面无法正常工作 localhost 发送了无效响应。 ERR_INVALID_REDIRECT

标签： javascript node.js express http xmlhttprequest

【解决方案1】：

根据这个 [Github Issue](https://github.com/http-party/http-server/issues/525 这是一个已知的http-server 问题，它会影响 0.10.x 及更高版本。

所以，卸载当前的http-server，

npm uninstall http-server -g

然后重新安装0.9.0版本，

npm install -g http-server@0.9.0

但是，如果您想使用 express 为文件夹提供服务，您可以使用 static 方法。

const express = require('express');

var app = express(); // better instead
app.use(express.static(__dirname));

app.listen(8080, ()=>{console.log('Server Started')});

鉴于JSTEST 文件夹中的这个.js 文件，您正在通过node <filename>.js 运行它

注意：打开127.0.0.1:8080时不会显示目录列表。但是，如果您打开 127.0.0.1:8080/xmlhttp_info.txt，它将提供 xmlhttp_info.txt 文件

【讨论】：

而且在实际html文档中点击按钮时没有办法获取数据？
是的，您正在对127.0.0.1:8080/xmlhttp_info.txt 执行ajax req，您将获得文件内容。
天啊...我终于让它工作了。令人困惑的是，我不得不输入“xmlhttp_info.txt.txt”而不是上面的。

【解决方案2】：

您必须使用 express 创建一个 get 端点。

const express = require("express");
const app = express();
const path = require("path");
const PORT = 8080;

app.get("/",(req,res)=>{
 res.sendFile(path.join(__dirname,"folderName","index.html")); //folderName is optional
//res.send("Hello World")//sends just text
})


app.listen(PORT, () => {
  console.log("listening");
});

使用 path.join() 代替硬编码要显示的文件的路径。不同的操作系统有不同的文件系统，所以当你在不同的操作系统上使用你的应用程序时你不会出错。路径是内置模块，你不需要安装。

您问题的第二部分。假设您正在显示 index.html。文件里面

<body>

<h2 id="content">Using the XMLHttpRequest Object</h2>
<div id="demo">
<button type="button" id="change">Change Content</button>
</div>

<script type="text/javascript">
const $content=document.getElementById("content");
const $button=document.getElementById("change");
$button.addEventListener("click",()=>{
$content.innerHTML="hello World"
//$content.textContent="hello World" 
})
</script>

【讨论】：

thanx 但我实际上想从计算机上的文件中获取文本。 xmlhttp_info.txt。我怎样才能做到这一点？还有没有办法使用香草js来做到这一点？我试图先了解基础知识。非常感谢。