node学习笔记（二）（ajax方式向node后台提交数据）

来源：互联网发布：淘宝950轮播代码编辑：程序博客网时间：2024/05/24 00:27

一：通过ajax向node后台提交数据过程（附前后台代码），并总结post与get的区别

POST

前台代码

//CSS简单给点样式 <style>        form{            width: 200px;            height: 200px;            margin: 100px auto;        }        #content{            width: 400px;            height: 60px;            border: 1px solid black;            margin: auto;            text-align: center;            line-height: 60px;            border-radius: 5px;        }        #submit{            width: 175px;            height: 30px;            background-color: skyblue;            margin: 20px 0;            border: 1px solid white;            border-radius: 5px;        }    </style>//HTML<body><div id="content">状态显示框</div><form action="http://127.0.0.1:8000/from" method="POST"> //post方式    <label for="login">用户名：</label><br>    <input id="login" type="text" name="user" placeholder="请输入用户名"><br>  // label for属性表单绑定    <label for="login">密码：</label><br>    <input id="pwd" type="password" name="pwd" placeholder="请输入密码"><br>    <input id="submit" type="button" value="登录" onclick="loadXMLDoc()"><br></form></body>//JS，ajax<script>    function loadXMLDoc(){        let xhr;        let username = document.getElementsByName("user")[0];        let userpwd = document.getElementsByName("pwd")[0];        xhr = new XMLHttpRequest(); //构造一个ajax对象        xhr.onreadystatechange=function() {            if (xhr.readyState==4 && xhr.status==200) {            document.getElementById("content").innerHTML=xhr.responseText;              //接收后台数据            }        };        xhr.open("post","http://127.0.0.1:8000/from",true);        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//post必写请求头文件        xhr.send(`user=${a.value}&pwd=${b.value}`);//ES6字符串扩张之模板字符串    }</script>

后台代码

const http = require("http");const fs = require("fs");const querystring = require("querystring");const url = require("url");//引入需要模块let server = http.createServer(function (req,res) {    let pathname = url.parse(req.url).pathname;    if(pathname === "/" ){        fs.readFile("./login.html",function (error,data) {            if(!error){                res.writeHead(200,{"content-type":"text/html"});                res.end(data)            }else{                res.end("" + error);            }        })    }else if(pathname === "/from"){        let data = "";        req.on("data",function (chunk) {          //data事件：数据接收时...回调           data = data + chunk;//chunk参数表示data数据流不断被解析，不断发送的数据包，这个例子中数据格式为字符串，只需要一次性接收           console.log(data)//user=tom&pwd=tom，data流监听，不断接收数据流信息        });        req.on("end",function () {          //end事件：数据接收完毕时...回调            let querys = querystring.parse(data)//将data流转换为对象形式            console.log(querys);//{user:"tom",pwd:"tom"}.            if(querys.user === "tom"  && querys.pwd === "tom"){                res.writeHead(200,{"content-type":"text/html;charset=utf-8"});//注意报头文一定要写                res.write("登陆成功");                res.end();            }else {                res.writeHead(200,{"content-type":"text/html;charset=utf-8"});                res.write("登陆失敗");                res.end();            }        })    }});server.listen(8000,"127.0.0.1",function () {    console.log("linsten")});

GET

前台代码

//简单写点样式<style>        form{            width: 200px;            height: 200px;            margin: 100px auto;        }        #content{            width: 400px;            height: 60px;            border: 1px solid black;            margin: auto;            text-align: center;            line-height: 60px;            border-radius: 5px;        }        #submit{            width: 175px;            height: 30px;            background-color: skyblue;            margin: 20px 0;            border: 1px solid white;            border-radius: 5px;        }    </style>//HTML<body><div id="content">状态显示框</div><form action="http://127.0.0.1:8000/from" method="GET">//提交方式为GET    <label for="login">用户名：</label><br>    <input id="login" type="text" name="user" placeholder="请输入用户名"><br>    <label for="login">密码：</label><br>    <input id="pwd" type="password" name="pwd" placeholder="请输入密码"><br>    <input id="submit" type="button" value="登录" onclick="loadXMLDoc()"><br></form></body>//JS<script>    function loadXMLDoc(){        let xhr;        let username = document.getElementsByName("user")[0];        let userpwd = document.getElementsByName("pwd")[0];        xhr = new XMLHttpRequest();        let url = `http://127.0.0.1:8000/from?user=${username.value}&pwd=${userpwd.value}`        //由于用ajax，get方式提交时url中不会显示具体的url，但其提交方式仍然为get，本质还是不安全，可能在url网络数据传输过程中被拦截。        xhr.open("GET",url,true);        xhr.send(null);        xhr.onreadystatechange=function() {            if (xhr.readyState==4 && xhr.status==200) {                document.getElementById("content").innerHTML=xhr.responseText;            }            console.log(xhr.responseText)        };//        xhr.open("post","http://127.0.0.1:8000/from",true);//        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//        xhr.send(`user=${username.value}&pwd=${userpwd.value}`);//注释掉的为POST方式请求代码    }</script>

后台代码

const http = require("http");const fs = require("fs");const url = require("url");let sever = http.createServer(function (req,res) {    let pathname = url.parse(req.url).pathname;    let query = url.parse(req.url,true).query;//字符串转对象    if(pathname === "/"){        fs.readFile("./login.html",function (error,data) {            if(!error){                res.writeHead(200,{"content-type":"text/html"});                res.end(data);            }else {                res.end("" + error);            }        })    }else if(pathname === "/from"){        console.log(query);//对象形式        if(query.user === "tom" && query.pwd === "tom"){            res.writeHead(200,{"content-type":"text/html;charset=utf-8"});            res.write("登陆成功");            res.end();        }else{            res.writeHead(200,{"content-type":"text/html;charset=utf-8"});            res.write("登陆失敗");            res.end();        }    }});sever.listen(8000,"127.0.0.1",function () {    console.log("服务器已开启")});

总结：

post和get本质上都是TCP链接，是HTTP中两种发送请求的方法。，由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

区别一：最直观的区别就是GET把参数包含在URL中，POST是通过request body 传送参数，“request body”就是请求文件返回的内容。

区别二：get传送的数据量较小，不能大于2KB。（取决于浏览器本身），post传送的数据量较大，一般被默认为不受限制。可以上传图片、文件等非字符串格式数据。

区别三：因为GET参数通过URL传递，那么GET方式不是安全的，这里的安全指：比如账号密码登录用GRT，别人可以通过URL看到你的信息，尽管通过ajaxURL地址栏不会显示，但是仍然可以用firefox或者其他的软件看到请求内容，实质上还是会通过URL网络传输被截取到。

区别四：GET是“安全“的，这里的安全指的是不会改变服务器端的数据，只会接收请求，而POST则可以改变服务器上资源的请求。

阅读全文

0 0