2019-10-28HTTP协议

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'

});

回到浏览器中,乱码问题被解决。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容