nodejs服务器响应头,nodejs-getpost提交http请求响应

理解表单使用post方式提交数据时后端接收数据的方法

理解表单使用get方式提交数据时后端接收数据的方法

理解post和get的区别

记住请求报文的组成

记住响应报文的组成

fs模块： 进行目录和文件操作

readFile: 读文件

writeFile: 覆盖写文件

appendFile: 追加写文件

readdir: 遍历目录

1. post表单提交

1550024077433.png

表单提交的必要条件

必须有form标签

action：表单数据提交的位置，必须是一种后端技术来接收

method： 表单提交的方式，post(常用)、 get(默认)

每个表单域都要有name属性和值

必须要有submit按钮

后端接收 --- post方式

//1. 监听data事件，循环接收post表单提交的数据

let str = '';

//参数1： 事件类型，data代表接收客户端数据事件

//参数2： 接收时触发的回调函数

// 使用post提交的表单数据可能会非常大，需要切割成一个个的小数据块进行接收

req.on('data', (chunk) => {

str += chunk;

})

//2. 监听end事件，接收完成后处理接收到的数据

//参数1： 事件类型，end代表接收数据完成时触发的回调函数

//参数2： 完成后触发的回调函数，在该函数中可以处理接收到的数据

req.on('end', () => {

console.log(str);

})

案例: 接收表单提交的用户和密码

创建index.html页面，设置表单

1550022255616.png

注意表单提交所需的三点。

创建服务器显示表单页

1550024154187.png

增加 /postData 的监听，来接收表单提交的数据

先用data事件来接收表单提交的数据，再用end事件来处理接收好的数据

接收到的str的结果： ==username=aaa&userpwd=123==

username 和 userpwd 是表单name的值

1550024200779.png

username=zs&userpwd=123&...

username 和 userpwd 是表单中name的值

zs 和 123 是自己填写的值

2. 每种表单域提交的方式

表单标签： form 、 ==input 、 select 、 textarea==

==表单提交的实际上是每个域的value值==

特殊:

select - option标签

​ name属性是设置在select标签中

​ value属性是设置在option标签中

​ 如果在option标签中没有value，则会提交 option标签中的内容，但是强烈建议使用value属性

textarea 标签

​ name属性设置标签中

​ value就是两个标签之间的内容

1550026086743.png

3. get提交表单数据

get方式提交表单数据时，数据会以字符串方式显示在地址栏

显示方式： key1=value1&key2=value2&key3=value3&...

? 之后的部分就是表单提的数据，是一种 key=value&key=value的形式

key是表单域中name的值

要解析url地址可以使用url模块，该模块是一个系统模块

案例: url功能测试

1550027049545.png

执行结果:

1550027075186.png

重点:

pathname： 请求的url地址

query： ？之后的参数。 当parse方法设置参数2为true时，？之后的参数会被解析为对象形式

案例： 表单使用get方式提交数据

设置表单

1550027841076.png

创建服务器显示 index.html 页面

1550027907192.png

增加 /getData 的监听，来接收表单提交的数据

1550027939990.png

4. get和post的区别

==通过URL地址栏来区分post和get==

提交方式

get会将数据显式的拼接到url地址栏中 (字符串)

例如： /getData==?==id=10001==&==username=heiheihei==&==passwd=123456&key=value....

key=value方式传参，多个参数之间使用&符号隔开

id、username、passwd等等(键/key)都是表单域的name值

1、heiheihei、123456等等(值/value)都是表单域的value值

post不会显示出来

传递数据量大小

post传递的数据量较大，理论上是无上限的

get会受到浏览器的地址栏的限制。有的是2k(IE6)，有的是8K(chrome)

应用范围不一样

post在绝大多数情况下都使用在表单提交中。

get的应用范围比较广，只要能进行页面跳转，就能传递数据。在a标签的href中，location.href中等都能使用get方式。

5. 发表评论

保证表单能够正常提交

form： action (指定表单数据提交的位置) method (提交方式 post)

每个表单域都要有name属性和值

必须有submit按钮来提交表单

1550030463702.png

增加 /addpost 监听，在该分之中接收表单提交的数据

1550030752670.png

6. http协议

6.1 http协议概述

协议: 就是事先的一种约定、规则、规范、标准。(租房合同、工作合同)。

HTTP协议(HyperText Transfer Protocol )：超文本传输协议，客户端(浏览器端)与WEB服务器端之间的交互协议。当浏览器和服务器进行数据交换时，html文件、图片、CSS、JS等都是基于HTTP协议进行传输的。

HTTP协议有两个版本: 1.0 和 1.1，目前使用的基本都是1.1

特点:

通常是基于 B/S 结构软件的。

无连接: 浏览器向服务器发送一次请求，服务器响应一次，链接即结束。

无状态: 无记忆。 服务器不能记住哪个浏览器访问过。

HTTP协议主要分为两大部分:

请求: 访问服务器的任何一个文件都是一次请求

响应: 服务器处理请求，将结果返回给浏览器。

6.2 请求协议/请求报文

请求分为3个部分: 请求行 请求头 请求主体

请求行: 请求方式、请求URL地址、协议版本号

请求头: 主机域名，端口号，客户端(浏览器)的信息等

请求主体: 发送给服务器的数据，get和post都会通过请求主体将数据发送给服务器

可以使用Chrome tools 或者 firebug 来查看请求和响应的信息(F12)

主要请求项:

host： 主机名和端口号，80端口默认不显示

accept：可接受的程序/文件类型

accept-encoding： 可接受的压缩类型

accept-language： 可接受的语言类型

案例1: 访问 127.0.0.1:3000/index，查看请求行和请求头

1550031744937.png

打开F12

1550031796127.png

1550031927884.png

案例2: 使用get方式提交数据，查看请求行、请求头和请求体

案例3: 使用post方式提交数据，查看请求行、请求头和请求体

6.3 响应协议/响应报文

响应也分为3部分: 响应行 响应头 响应主体

响应行: 协议版本号、响应结果状态码

响应头: 主要是服务器端的信息

响应主体: 就是从服务器返回给客户端的数据

主要响应项：

content-type： 响应内容类型， content-type:text/html，服务器告诉浏览器，返回的这部分数据是文本类型，使用html方式来解析即可。

content-length： 响应内容的长度 ，content-length:336, 从服务器返回给浏览器的数据总长度为336字节

6.4 多次请求和响应

1549973295308.png

6.5 常见状态码

常见的状态码如下:

200 ok ----- 请求成功

302 redirect|Found ----- 重定向

304 not modified ----- 未修改

403 forbidden ----- 禁止访问 (没有权限访问)

404 Not Found ----- 未找到页面

500 internal server error ----- 服务器内部错误 (可能是服务器本身有问题，或者代码错的太离谱)

6.6 req和res对象

req(request)：请求对象

url: 保存了浏览器的url地址

method: 请求方式

headers: 请求头信息

res(response)：响应对象

setHeader()： 设置响应头信息

writeHeader()： 设置响应头信息和状态码

write(): 设置响应体

end(): 将响应行、响应头、响应体一次性返回给浏览器