浏览器请求nodejs搭建的web服务器上的html文件时引用不了jQuery.js文件解决办法

本文介绍了如何使用Node.js创建一个简单的Web服务器,该服务器能够响应HTML文件请求并处理HTML中引用的外部资源,如JavaScript文件。通过监听特定端口并解析请求URL,服务器能够分别读取并返回不同的文件内容。当遇到如jQuery.js这样的外部文件请求时,服务器会读取文件并将其内容发送给浏览器,确保页面加载完整。
摘要由CSDN通过智能技术生成

构建web服务器代码(nodejs构建)

//引入核心模块http和fs
var http=require("http");

var fs=require("fs");

//创建服务器
var server=http.createServer();

server.on("request",function(req,res){
    let url=req.url;
    if(url=="/")
    {
        //请求时响应html文件
        fs.readFile("todoList.html",function(err,data){
            if(err)
            {
                //请求失败时响应普通文本
                res.setHeader("Content-Type","text/plain; charset=utf-8") 
                res.end("文件读取失败");
            }else{
                //请求成功时响应html文本
                res.setHeader("Content-Type","text/html; charset=utf-8") 
                res.end(data);
            }
        })
        //因为html文件中引用了jQuery.js文件,所以要手动添加这个文件的访问路径
    }else if(url=="/jQuery.js"){
        fs.readFile("jQuery.js",function(err,data){
            if(err)
            {
                res.end("load faild")
            }else{
                res.end(data);
            }
        })
    }
})

server.listen("3000",function(){
    console.log("服务器启动成功,可以访问3000端口");
})
```js


例如html文件中有外部引入的jQuery.js文件

```js
<script src="./jQuery.js"></script>

如果web服务器响应的html文件中有外部引入的文件如css样式或者js文件,则需要手动设置对这些外部引用文件的请求url的处理(接收到这些请求URL时打开引用文件并把文件中数据返回给浏览器)

在这里插入图片描述

例如html文件中有外部引入的jQuery.js文件

<script src="./jQuery.js"></script>

则需要手动设置对jQuery.js文件的请求URL的处理

else if(url=="/jQuery.js"){
        fs.readFile("jQuery.js",function(err,data){
            if(err)
            {
                res.end("load faild")
            }else{
                res.end(data);
            }
        })
    }

成功访问页面
在这里插入图片描述

如果没有设置到外部引入文件的请求url,就会导致浏览器一直请求不到html文件中引入的外部文件如(jQuery.js),这样就会导致浏览器一直转圈等待。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值