当前位置：网站首页>【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】

【SSR服务端渲染+CSR客户端渲染+post请求+get请求+总结】

2022-08-04 23:04:00 【勇敢*牛牛】

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, res) {
    
    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, res) {
    
    /* 通过这个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, reject) {
    
        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>

总结

SSR服务端渲染：直接get请求服务端会写入当前页面
CSR服务端渲染：通过求服务端会嵌入当前页面，不修改页面
get请求有两种：直接在url后面跟进对象，通过Ajax请求注意xhr.end()没有参数
post通过xhr的open方法（“POST”）进入，因为这个数据的“庞大性”需要异步promise处理数据，实现异步阻塞式同步。

原网站

版权声明
本文为[勇敢*牛牛]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_46672781/article/details/126164621