js通过ajax写一个网站（未使用静态资源托管）

最新推荐文章于 2024-04-18 10:38:28 发布

HaiRong_21

最新推荐文章于 2024-04-18 10:38:28 发布

阅读量152

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/HaiRong_21/article/details/109688693

版权

//思路：
//使用一个端口创建服务器，在服务器端响应前端的请求
//入口路径是path == ‘/homepage’
//当前端请求这个路径的时候，我们去做一些事情：
//在这里是：读取./homepage.html文件，读取成功将读取的内容返回给前端res.end(data)
//因为浏览器会解析这个html文件，所以响应回前端的就是一个页面
//在./homepage.html文件里，设置这样的事情：
//向这个地址：‘http://192.168.2.65:86/index’,发起GET请求
//当向服务器的index发起这个请求的时候，服务器同样也要响应数据发给前端
//在这里是设置了这个响应的内容
// let obj = { word: ‘新闻信息提要，文字文字文字’, img1: ‘http://192.168.2.65/1.jpg’, img2: ‘http://192.168.2.65/2.jpg’, img3: ‘http://192.168.2.65/3.jpg’ }
// let str = JSON.stringify(obj)
// res.end(str)
//在前端我们需要判断是否接受到了后端返回来的数据，可以通过xhr.onreadystatechange来监听是否接受完成，
//xhr.readyState == 4表示完成了
//当完成了我们需要做一些事情
//在这里是：
//创建div盒子，取得响应回来的内容(通过xhr.responseText可以得到后端res.end的信息)，将这些内容放在div盒子里面

//需要注意的是，当我们读取./homepage.html文件的时候，因为这个文件Link了css文件
//这个css文件同样会向服务器发起请求，所以需要在服务器端设置响应处理。

入口的homepage.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="homepage.css">
   
</head>

<body>
    <h1>首页</h1>
    <script>
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://192.168.2.230:86/index');
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {

                let str = xhr.responseText;
                var obj = JSON.parse(str)
                console.log(obj.img1,obj.img2,obj.img3)

                let box = document.createElement('div');
                box.classList = 'box'
                document.body.appendChild(box);

                let p = document.createElement('p');
                p.innerHTML = obj.word;
                box.appendChild(p)

                let img1 = document.createElement('img');
                img1.src = obj.img1;
                box.appendChild(img1)

                let img2 = document.createElement('img');
                img2.src = obj.img2;
                box.appendChild(img2)

                let img3 = document.createElement('img');
                img3.src = obj.img3;
                box.appendChild(img3)

            }
        }
    </script>
</body>

</html>

引入的css

.box{
    width: 600px;
    height: 300px;
    background-color: #ecc;
}
.box img{
    width: 170px;
    height: 200px;
    margin: 10px;
}

后端（负责响应前端发起的请求）

let http = require('http');
let fs = require('fs');

let duankou = http.createServer(function (req, res) {
    let path = req.url;
    if (path == '/homepage') {
        fs.readFile('./homepage.html', (err, data) => {
            res.end(data)
        })
    }
    else if (path == '/homepage.css') {
        fs.readFile('./homepage.css', (err, data) => {
            if (err) { throw err }
            else {
                res.end(data)
            }
        })
    }
    else if (path == '/index') {
        let obj = { word: '新闻信息提要，文字文字文字', img1: '1.jpg', img2: '2.jpg', img3: '3.jpg' }
        let str = JSON.stringify(obj)
        res.end(str)
    }
    else if (path == '/1.jpg') {
        fs.readFile('./1.jpg', (err, data) => {
            res.end(data)
        })
    }
    else if (path == '/2.jpg') {
        fs.readFile('./2.jpg', (err, data) => {
            res.end(data)
        })
    }
    else if (path == '/3.jpg') {
        fs.readFile('./3.jpg', (err, data) => {
            res.end(data)
        })
    }

})
duankou.listen(86, () => {
    console.log('86端口启动');
})

ps：把代码复制粘贴不会有效果，因为我没有上传图片，我们的文件路径也不一致，导致读取文件的路径也找不到。

效果如下：
在这里插入图片描述