需要掌握基礎(chǔ)的node知識和Ajax請求知識。
1.目錄結(jié)構(gòu)如下。
2.完整代碼展示及注釋：
data.json (模仿后臺數(shù)據(jù))
{
"data": {
"returnCode": "SUCCESS",
"success": true,
"banner": "雙十一大搶購！go!go!go!",
"list": [
{
"title": "入秋穿搭指南",
"imgage": "xxx.jpg"
},
{
"title": "秋季護膚大作戰(zhàn)",
"imgage": "xxx.jpg"
},
{
"title": "流行套裝搶先一步",
"imgage": "xxx.jpg"
},
{
"title": "煥新時尚周",
"imgage": "xxx.jpg"
},
{
"title": "好物特賣",
"imgage": "xxx.jpg"
}
]
}
}
server.js （搭建服務(wù)器）
const http = require('http');
const fs = require('fs');
const server = http.createServer((request, response) => {//創(chuàng)建一個服務(wù)器實例，傳入一個回調(diào)函數(shù)
const url = request.url;
if (url === '/') {//如果請求到的路徑是當(dāng)前路徑，則執(zhí)行這里面的內(nèi)容
fs.readFile('./index.html', (err, data) => {//讀取我們當(dāng)前的index.html頁面狀態(tài)
if (!err) {//如果沒有報錯的話，就執(zhí)行這里的代碼
//設(shè)置響應(yīng)頭和200狀態(tài)碼（成功）
response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"})
//1.statusCode：HTTP狀態(tài)碼，如200(請求成功）
//2.設(shè)置服務(wù)器端返回數(shù)據(jù)的方式和類型，防止中文亂碼
response.end(data);//此方法向服務(wù)器發(fā)出信號，表明已發(fā)送所有響應(yīng)頭和主體
}else {
throw err;//拋出錯誤
}
});
}else if (url === '/data') {
fs.readFile('./data.json', (err, data) => {
if (!err) {
response.writeHead(200, {"Content-Type":"application/json"})
response.end(data)
}else {
throw err;
}
})
}else {
}
});
server.listen(8080);//監(jiān)聽端口
console.log(`server is running at http://127.0.0.1:8080`)
index.html （發(fā)送ajax，請求數(shù)據(jù)）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 發(fā)送ajax請求 -->
<button onclick="success()">發(fā)送請求</button>
<script>
function success() {
const http = new XMLHttpRequest();//創(chuàng)建一個XHR的實例對象
http.onreadystatechange = () => {//綁定一個 readystatechange 事件,用于監(jiān)聽http.status和http.readyState的屬性變化
if (http.status == 200 && http.readyState == 4) {//判斷狀態(tài)：200是成功的狀態(tài)碼、readyState是響應(yīng)階段，有0-4共5個響應(yīng)階段，4代表的是已接收到全部的響應(yīng)
const result = JSON.parse(http.responseText);//接收服務(wù)器端返回的文本信息并且通過JSON.parse()方法解析文本信息
//為什么需要解析服務(wù)器端返回的文本信息，因為服務(wù)器端返回的文本信息是二進制的Buffer流
console.log(result)
}
}
http.open('GET', '/data');//創(chuàng)建一個get請求，攜帶參數(shù)數(shù)據(jù)
http.send()//發(fā)送請求
}
</script>
</body>
</html>
3.運行服務(wù)器。
4.效果展示。
附:對于ajax請求不是很了解的，可以看下這個：https://blog.csdn.net/l_ppp/article/details/108921610?utm_medium=distribute.pc_category.none-task-blog-hot-5.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-5.nonecase&request_id=
對于服務(wù)器搭建不是很了解的，可以看下這個：https://www.liaoxuefeng.com/wiki/1022910821149312/1023025830950720
