node学习笔记（二）（ajax方式向node后台提交数据）
通过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则可以改变服务器上资源的请求。
今天的学习笔记就到这里，纯个人手写，如有发现错误，欢迎指出，非常感激！
node学习笔记（二）（ajax方式向node后台提交数据）的更多相关文章
- node学习笔记(二)
process.stdout(); //标准输出流 process.stdout.write() //提供了比console.log更底层的接口 process.stdin(); //标准输入流 // ...
- node学习笔记(二)流和缓冲区
内容 视频 第四章内容 菜鸟教程服务器 //复制文件 function de(x) { console.log(x); } var fs=require('fs'); fs.mkdir('stuff' ...
- Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记（十五）--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- Nodejs学习笔记（十五）—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- node学习笔记第一天
ES6---* JavaScript语言随着使用的人越来越多,ECMA语法规范:if/else* 为了让js语言更适应大型应用的开发.旨在消除一些怪异的行为 ### 包含内容(strict严格模式)- ...
- Node.js学习笔记（1）：Node.js快速开始
Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...
- Linux内核学习笔记二——进程
Linux内核学习笔记二——进程 一 进程与线程 进程就是处于执行期的程序,包含了独立地址空间,多个执行线程等资源. 线程是进程中活动的对象,每个线程都拥有独立的程序计数器.进程栈和一组进程寄存器 ...
随机推荐
- win10 uwp 绘图 Line 控件使用
本文主要讲一个在绘图中,我们会有一个基础的控件,Line.控件的基本使用和他能做出的我们很多时候需要的界面. 虽然是一个简单控件,但是可以做出很诡异的很好看的UI. 首先,我们要知道,Line就是画直 ...
- IDEA搭建SpringMVC+Mybatis+Mysql+Maven框架
相关环境 Intellij IDEA Ultimate Tomcat JDK MySql 5.6(win32/win64) Maven (可使用Intellij IDEA自带的) 搭建步骤 创建项目工 ...
- C# To C++ Converter Cracked ( 破解版 )
C# To C++ Converter v17.10.2 Cracked By X-Cracker 简介 C# To C++ Converter是一款将C#代码或者项目转换为C++的工具 免费版本一次 ...
- Linux系统用户管理
一.Linux账户 广义上讲,Linux的账户包括用户账户和组账户两种. Linux系统下的用户账户有两种,普通用户和超级用户.普通用户在系统中的任务就是普通工作,管理员在系统上的任务就是对普通用户和 ...
- python中openpyxl的用法【安装,以及一些基本的操作】
概述 Openpyxl是python中简单易用的操作excel电子表格的一个模块.接下来呢,跟博主一起学习一下吧 ----_<_>_---- 首先先清楚一些excel的基本概念: 在op ...
- ssm框架的整合
首先创建一个web工程,我这里使用的IDE为eclipse. 结果目录如下: 添加相关的jar包: 接下来是完成配置文件 首先我们先配置web.xml: <?xml version=" ...
- java 随记
后台开发的过程中积累的关于java的杂记 架构 SSH框架 为什么要分层? 因为分层使代码变得清晰,容易写也容易阅读,更重要的是让代码扩展性更好,层与层之间的改动不会互相影响 各层的分工 dao--与 ...
- Windows环境下多线程编程原理与应用读书笔记（5）————互斥及其应用
<一>互斥的同步机制 思想:当一个线程获得互斥量了后,其他所有要获取同一个互斥量的线程都处于阻塞状态,直到第一个线程释放互斥量为止. 设想几个线程竞争同一个互斥量,其中一个线程获得了互斥量 ...
- awk内置函数
gsub(r,s,t) 在字符串t中,用字符串s替换和正则表达式r匹配的所有字符串.返回替换的个数.如果没有给出t,缺省为$0 index(s,t) 返回s 中字符串t 的位置,不出现时为0 leng ...
- 爱pia戏推出PC客户端，为您自动置顶窗口，方便查找
爱pia戏推出PC客户端, 可以在无法使用插件的时候,使用PC客户端, 将为您自动置顶窗口,方便查看剧本. 百度网盘下载地址: 链接: http://pan.baidu.com/s/1pLpvn5p ...