SSR服務端渲染
get請求方式
get.html檔案
<form action="http://10.9.46.253:4002" target="_self">
<input type="text" name="user">
<button type="submit">送出</button>
</form>
req
請求 用戶端發送給這個服務端的消息對象
res
響應 這個服務端發給用戶端的消息對象
res.end()
發送給用戶端響應消息
res.writeHead(200,{})
200
表示請求成功
404
找不到
{}
響應頭 将消息發送給用戶端響應的時候，告訴用戶端一系列要求
res.write("<div>你好</div>");
給響應消息體中寫入内容，可以使用多個，但是必須寫在
res.end()
之前
res.end()
就是把上面的内容發送出去
get.js，伺服器檔案
var http = require("http");
var querystring = require("querystring");
http.createServer(function (req,) {
var str = req.url.split("?")[1];
var o = querystring.parse(str);
res.writeHead(200, {
"Content-Type": "text/html;charset=utf-8",
"Access-Control-Allow-Origin": "*" //CORS 允許誰跨域通路
})
// res.write(o.user + ",歡迎來到我的網站");
res.write("<h1>啦啦啦,你好" + o.user)
res.write("歡迎通路勇敢牛牛的處理get類型伺服器</h1>");
res.end();
}).listen(4002, "10.9.46.184", function () {
console.log("已啟動get類型伺服器10.9.46.184:4002");
}); 
Ajax請求方式
<script>
var str = "user=牛小牛"
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", loadHandler);
xhr.open("GET", "http://10.9.46.184:4002?" + str);
xhr.send();
function loadHandler(e) {
console.log(xhr.response);
}
</script> 控制台：啦啦啦,你好牛小牛歡迎通路勇敢牛牛的處理get類型伺服器
CSR用戶端渲染
通過Ajax實作CSR,用戶端渲染
csr.html
<body>
<form action="http://10.9.46.253:4002" target="_self">
<input type="text" name="user">
<button type="submit">送出</button>
</form>
<div></div>
<script>var form,input,div;
init();
function init(){
form=document.querySelector("form");
input=document.querySelector("input");
div=document.querySelector("div");
form.addEventListener("submit",submitHandler);
}
function submitHandler(e){
e.preventDefault();
ajax("user="+input.value)
}
function ajax(param){
var xhr=new XMLHttpRequest();
xhr.addEventListener("load",loadHandler);
xhr.open("GET","http://10.9.46.253:4002?"+param);
xhr.send();
}
function loadHandler(e){
// console.log(this.response)
div.innerHTML=this.response;
}</script>
</body> post.js檔案
/* 加載伺服器對象 */
var http = require("http");
var querystring = require("querystring")
/* 建立伺服器 */
http.createServer(async function (req,) {
/* 通過這個promise函數實作異步阻塞 */
var o = await getData(req);
res.writeHead(200, {
"Content-Type": "text/html;charset=utf-8",
"Access-Control-Allow-Origin": "*" //CORS 允許誰跨域通路
})
res.write(`歡迎${o.user}通路勇敢牛牛的處理post類型伺服器`);
res.end();
}).listen(8080, "10.9.46.184", function () {
console.log("已啟動post類型伺服器10.9.46.184:8080");
})
function getData(req) {
return new Promise(function (resolve,) {
var str = '';
req.on("data", function (_chunk) {
/* 收到的是buff類二進制資料流 */
str += _chunk
// console.log(str);
})
req.on("end", function () {
var o = querystring.parse(str);
// console.log(o);
resolve(o)
})
})
} post.html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>safsd </h1>
<script>var str = "user=牛小牛";
// str = str.repeat(10000)
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", loadHandler);
xhr.open("POST", "http://10.9.46.184:8080");
/* post發送資料 */
xhr.send(str);
function loadHandler(e) {
console.log(xhr.response)
}</script>
</body>
</html>