http协议

HTTP:超文本传输协议,属于应用层协议,用于浏览器与服务器之间的通信,客户端打开tcp连接,发送请求给服务器,服务器接收请求并作出响应。

  • 特点:
  1. 无状态,有会话协议,服务器与浏览器之间的请求响应不会保留任何数据,是一种无连接无状态的协议
  2. 简单的
  3. 可扩展的
  4. 连接: 连接由传输层来控制,TCP连接是一种可靠传输,不会丢失信息(即使丢失了也会返回错误)UDP连接是不可靠传输

HTTP流

step1. 打开一个TCP连接,TCP连接后被用来发送一条或多条请求,以及接受回应的消息;
step2. 客户端发送一个HTTP请求封装在数据帧中
step3. 服务端接收并处理HTTP请求,返回响应
step4. 关闭连接或者为后续请求重用连接

  • 请求报文
    请求行 : 请求方法 请求url 协议版本 eg.
    请求头部 : headers
    空行
    请求数据
  • 回应报文
    响应行: 协议版本 状态码 状态文本
    响应头部
    空行
    响应数据

短连接(Connection: close):每一个http请求都会独立的连接完成,每个http请求都会有一个tcp连接
长连接(Connection: keep-alive):一个tcp连接会保持一段时间,重复用于发送一系列请求,节省每一个http请求都要生成一个tcp连接
流水线连接:请求不需要等待上一个请求接收到应答之后就可发出

HTTP的组件系统

客户端
服务器
代理 : 作用:缓存(可以是公开的也可以是私有的,像浏览器的缓存) / 过滤(像反病毒扫描,家长控制...) / 负载均衡(让多个服务器服务不同的请求) / 认证(对不同资源进行权限管理) / 日志记录(允许存储历史信息)
(代理缓存拓展:
概念: 重用已获取的资源能有效的提升网站与应用的性能,缓存是一种保存资源副本并在下次请求时直接使用该副本,当浏览器发起请求时发现在缓存中存在着相应资源,则会拦截请求,返回该资源的副本而不必去源服务器重新下载。
好处:能缓解服务器的压力,获取资源的时间变短从而提高性能。
类型: 私有与共享的缓存。
部署:代理缓存 / 网关缓存 / 浏览器缓存 / 负载均衡器 / cdn
缓存控制: Cache-control: no-store|no-cache (禁止进行缓存) | public | private | max-age(缓存的保鲜期) | must-revalidate(已经过期的缓存不再使用,缓存校验)

规则:当一个资源被缓存之后,当超过缓存期或者资源进行了更新,那么对副本进行删除或更新,当客户端发起一个请求时,缓存检索到已有一个对应的陈旧资源(缓存副本),则缓存会先将此请求附加一个 If-None-Match 头,然后发给目标服务器,以此来检查该资源副本是否是依然还是算新鲜的,若服务器返回了 304](Not Modified)(该响应不会有带有实体信息),则表示此资源副本是新鲜的,这样一来,可以节省一些带宽。若服务器通过If-None-MatchIf-Modified-Since判断后发现已过期,那么会带有该资源的实体内容返回。

Cookie

概念:服务器将发送用户浏览器保存在本地的数据中,在下一次浏览器再向同一个服务器发起请求被携带并发送到服务器上,用于告知服务器两个请求是否来自同一个浏览器。
Cookie主要用于以下三个方面:

  • 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
  • 个性化设置(如用户自定义设置、主题等)
  • 浏览器行为跟踪(如跟踪分析用户行为等)

跨域方法

  • 浏览器的同源策略:当一个资源从客户端发起请求的资源所在的服务器跟客户端的协议,域名,和端口不一致时,会拒绝发出请求;限制行为:1. 无法读取非同源网页的Cookie、LocalStorage、IndexedDB;2. 无法接触非同源网页的 DOM;3. 无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)。
一、CORS
  • 允许使用跨域的情况:
  1. XMLHttpRequest() 或 fetch 发起的跨域请求
  2. @font-face 跨域请求字体资源
  3. webGL贴图 / canva drawImage

简单请求:

  1. Method: GET HEAD POST
  2. 不得人为设置该集合之外的其他首部字段:Accept / Accept-Language / Content-Language / Content-Type / DPR / Downlink / Save-Data / Viewport-Width / Width
  3. Content-type : text/plain | mulitipart/form-data | application/x-www-form-urlencoded
    非简单请求(需要先预检请求)
    先发送预检请求(Method:OPTIONS)给服务器,确认后再发送http请求给服务器

请求头:
Origin:发送请求的域名
Access-Control-Request-Method:请求方法
Access-Control-Request-Headers:请求头部字段
响应头:
Access-Control-Request-Method:存在请求头中的方法
Access-Control-Request-Headers:存在请求头中的头部字段
Access-Control-Allow-Origin:包含请求域 | *
Access-Control-Max-Age:表明该响应的有效时间,在有效时间内,浏览器无须为同一请求再次发起预检请求。
Access-Control-Allow-Credentials
....
满足才能实现跨域

二、JSONP

原理:动态插入script元素,向服务器发出请求,请求查询字符串中有一个毁掉参数,用来指定回调函数的名字,服务器收到请求之后就会调用指定的回调函数,并把返回的数据放在回调函数的参数中
缺点:只能GET方法


各种协议

  • IP协议
  • ARP协议 : ARP查询包中的源IP地址是源主机的IP地址,目标IP地址是目标主机的IP地址,源MAC地址是源主机的MAC地址,ARP査询包中的目的MAC地址是广播MAC地址FF-FF-FF-FF-FF-FF。
  • TCP协议:可靠传输协议,接收方会对接收到的数据分段发送确认给发送方,而发送方会将没有确认的数据分段重新传送给接收方,接收方会对数据分段按照正确的顺序重组,并且删除重复的数据分段;TCP的三次握手:

readyState状态: 请求当前所处的状态
0:unsend 代理已经创建,但是未调用open()
1:opened open()方法被调用
2:headers_received send()方法已经被调用,头部状态是可获得
3:loading 下载中,responseText已经包含部分数据
4:done 下载操作已经完成 服务器响应成功或者失败

status 请求结束的状态码
101, 转换协议
200, OK,访问正常
204, No Content,服务器成功处理了请求但是不需要返回实体内容
205, Reset Content,服务器成功处理了请求但是会重置文档
206,
301, Moved Permanently,永久移动
302, Move temporarily,暂时移动
304, Not Modified,未修改
307, Temporary Redirect,暂时重定向
401, Unauthorized,未授权,当前的请求需要用户身份验证
403, Forbidden,禁止访问
404, Not Found,在服务器中找不到请求的资源
500, Internal Server Error,服务器发生错误
502,
503, Service Unavailable,服务器没有准备好处理请求,服务器处于维护或者停机的状态

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

推荐阅读更多精彩内容

  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    许先生__阅读 496评论 1 2
  • 浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏...
    徐国军_plus阅读 364评论 0 4
  •   2005 年,Jesse James Garrett 发表了一篇在线文章,题为“Ajax: A new App...
    霜天晓阅读 889评论 0 1
  • 一、什么是AJAX?以及AJAX诞生缘由 什么是AJAX? AJAX全称是异步JS和XML(Asynchronou...
    风起云帆阅读 270评论 0 0
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,195评论 0 7