1.1HTTP协议的概念
客户端和服务器端沟通的规范:
为什么要有这个规范?
答:网站应用在运行的过程中,服务器端需要知道客户端请求了什么,客户端知道服务器端响应了什么,不能鸡同鸭讲。需要一个双方都能听懂的语言。
HTTP协议:超文本传输协议,规定了如何从网站服务器传输超文本到本地浏览器,它基于客户端服务器架构工作,是客户端(用户)和服务器端(网站)请求和应答的标准。
1.2报文
客户端和服务器端在进行请求和响应过程中,所携带的数据块,俩者对话的说明以及内容。
报文:请求报文、响应报文
请求报文:客户端向服务器端发送请求所携带的数据块(客户端对服务器所说的话)
响应报文:服务器端对客户端进行响应所携带的数据块(服务器对客户端说的话)
数据块:包含了请求和响应的相关信息,比如用户在登录时输入的用户名和密码被包含在请求数据块中进行传递的。当前登录时成功还是失败就包含在响应数据块中。
报文在传输过程中。遵循规定的格式,以 :进行分割的键值对
在哪能看到报文信息?
借助浏览器提供的开发者工具:Network,刷新浏览器
显示:search.html
search.jpg
favicon.ico
随便打开一个请求search.html(点击)
在右侧出现Headers Preview Response Cookies Timing
点击Headers
显示:General // 显示比较重要的信息,核心的信息
Response Headers(7) // 响应报文(服务器端对客户端)
Request Headers(11) // 请求报文(客户端对服务器端)
打开Request Headers(11)
显示: Accept: // 接收(告诉服务器端当前客户端能接收html文件,图片以及一些其他文件)
点击Response
显示的服务器端响应给客户端具体的内容
1.3请求报文
①请求方式:GET 请求数据、POST 发送数据
PS:请求方式就是一种标识,告诉服务器端当前这次请求要做的这个事情的类型,比如说获取数据的请求(一般都用GET),如果是添加数据的请求(就要POST),如果都不是,而是网站中的一般逻辑,比如登入操作(也用POST)
PS:POST这种方式相对GET要安全一些。
客户端如何向服务器端发送get或者post请求呢?
最常见的get请求,就是通过浏览器中的地址通过输入网址的方式,如何证明?
服务器端能获取客户端请求方式。
req:就是请求对象,它包含了请求相关的信息,其中就包含了请求方式。
如何获取请求方式?
req.method
app.js中 console.log(req.method);
打开网站:localhost:3000
命令行窗口:有请求方式输出GET
疑惑:为什么有2个GET输出?1个是输入localhost请求,1个是浏览器自带图标请求
如何发送post请求?
在server文件夹下新建form.html文件,并生成html头
<!--
method:指定当前表达提交的方式
action:指定当前表达提交的地址
-- >
<form method="post" action="http://loaclhost:3000">
<input type="submit" name="">
</form>
在浏览器中打开这个页面,命令行窗口就有post请求
证明了提交的表达确实是post请求。
疑惑:在post请求后为什么会有GET请求,在POST请求发送完后,表单发生了一个默认行为,其实就是表单的一个跳转行为(表单的跳转行为默认是一个GET方式)
服务器拿到GET请求,POST请求有什么用?
答:如果请求的地址是相同的,那么请求的方式是不同的,那根据这个请求的方式,响应不同的内容
app.js中
if(req.method == 'POST'){
res.end('post')
}else if(req.method == 'GET'){
res.end('get')
}
// res.end('<h2>hi,user</h2>');
浏览器打开localhost3000
得到get
浏览器打开form.html,提交表单(提交到了localhost:3000这个地址)
得到post
切换到浏览器中:输入localhost:3000/index
返回:get
切换到浏览器中:输入localhost:3000/list
返回:get
此时客户端无论访问什么地址,返回的都是相同的内容。怎么访问不同的内容呢?
怎么能访问index,返回首页内容呢?如果用户访问的地址不存在,返回页面没有找到,这个需求怎么实现?
答:服务器端要获取到客户端的请求地址,
req.url // 获取请求地址
切换到编辑器中
app.js中
console.log(req.url);
切换到浏览器中,访问/index
切换到命令行窗口
显示/index
if(req.url == '/index'){
res.end('welcome to homepage');
}else if(req.url=='/list'){
res.end*('wekcome to listpage');
}else{
res.end('not found');
}
回到浏览器中:访问/index
显示:welcome to homepage
回到浏览器中:访问/list
显示:welcome to listpage
回到浏览器中:访问/xxxxx
显示:not found
回到浏览器中:访问(不输入)
显示:not found
回到命令行工具窗口:
显示:/
如果什么也不写,想访问到首页
if(req.url == '/index' || req.url =='/'){
res.end('welcome to homepage');
}else if(req.url=='/list'){
res.end*('wekcome to listpage');
}else{
res.end('not found');
}
验证:成功
req.headers // 请求报文信息
app.js
console.log(req.headers);
切换到浏览器中,刷新页面
切换到命令行窗口:有2个对象输出
获取报文信息里具体的某一项
app.js
console.log(req.headers['accept']);
刷新页面,切换到命令行窗口,得到该项信息
3.4响应报文
1.HTTP状态码
·200请求chg
·404请求的资源没有找到
·500服务器端错误
·400客户端请求有语法错误
PS:默认情况下服务器端没有返回状态码,就是成功的,没有问题的。
CSS文件,图片文件没有找到:返回404错误,明确告诉这个资源没有找到,在浏览器的控制台中也会报一个红色的错误。
500错误和客户端一般没有什么关系,服务器端在运行时哪个一个地方的代码报错了,就会返回一个500的错误,告诉客户端服务器出现了问题。
400错误代表客户端的请求语法有问题,比如说请求路径写错了或者说请求参数不匹配,都可以返回400错误。
在浏览器的开发者工具中能够看到:Network第二项Status
=============================================
尝试在服务器端为客户端设置不同的状态码
切换代码编辑器中:
res.wirteHead();
res.wirteHead(500);
res.wirteHead(400);
PS:HTTP状态码就是一种标识,在返回时要把状态码设置成多少,完全取决于当前的警告。
2.内容类型
内容类型设置
·text/html
·text/css
·application/javascript // 返回javascript文件
·image/jpeg
·application/json
·text/plain // 默认
在writeHead()方法中,除了第一个参数状态码以外,它还有第二个参数,是一个对象(写的是响应头里的信息(响应报文的信息'content-type':text/plain))(PS:此处代表纯文本,不指定,默认是纯文本)
重点:通过设置res:writeHead(200,{
'content-type':'text/html'
});
使res.end('<h2>ni hao</h2>');输出ni hao
警告:里面是中文会出现乱码!!!在做网页开发时一般编码都是utf-8,这个时候我们需要把这个编码指定。
res:writeHead(200,{
'content-type':'text/html;charset=utf-8'
});
回到浏览器中,乱码问题被解决。