前端口试“http全过程”将一切HTTP相干学问抛出来了...

2024年5月3日 188次阅读 来源: _ipo

来一篇通同，一个http全过程的题目，把一切HTTP相干知识点都带过一遍

http全过程

输入域名(url)–>DNS映照为IP–>TCP三次握手–>HTTP要求–>HTTP响应–>(浏览器跟踪重定向地点)–>效劳器处置惩罚要求–>效劳器返回一个html响应–>(视状况决议开释TCP衔接)–>客户端剖析HTML–>猎取嵌入在HTML中的对象从新提议http要求

输入域名(url)

在域名这里有许多能够聊的：
域名级数鉴别
域名效劳器及域名这里有细致诠释，即“计算机网络技术”的第九章Domain Name System
一个点分开一级（域名由重量构成，一级为一个重量），通俗易懂以下：

...三级域名.二级域名.顶级域名
WWW.baidu.com  com为顶级域名(一般根据构造和地舆分为两类)，baidu为二级域名，WWW网站
www.pic.baidu.com pic为三级域名
所谓降域，如pic.baidu.com/a.txt  baidu.com/b.txt中a和b在差别的域下面，都降域为baidu.com..以下细致诠释

同源战略
同源需满足的前提：

  • 协定雷同

  • 域名雷同:a.b.c.com a.b.d.com域名雷同吗

  • 端口雷同

非同源受限定的行动：

  • cookie localStorage indexDB没法猎取

  • DOM没法取得

  • ajax要求不能发送
    跨域要领：

双向跨域
1.降域(二级和以上有配合部份)

所谓降域就是寻觅到最背面的域名雷同的部份留下
a.b.c.com
d.b.c.com
降域后一切改成b.c.com或许c.com

  • 存在的题目：

    • 平安性，当一个站点被进击，雷同域名的站点也会被进击

    • 重复性，一切须要跨域的都要修正document.domain=””

    • ajax不受降域影响，照样须要iframe在一个页面引入另一页面的情势

    • 不可更改性，一旦降域就没法归去

2.location.hash(FIM—fragment itentitier messaging)

a向b传送数据
    baidu.com/a.html中的iframe的src="google.com/b.html#paco",b.html监听到   url发生变化触发响应操纵
b向a传送数据
    google.com/b.html中隐蔽一个iframe,设置src="baidu.com/proxy.html#data" data为要传输的数据,proxy.html是和a.html同域名下的，是a b之间的代办，担任监听utl变化就修正a的url，a监听到url变化了就做出响应操纵

b.html:

try {  
    parent.location.hash = 'data';  
} catch (e) {  
    // ie、chrome的平安机制没法修正parent.location.hash，  
    var ifrproxy = document.createElement('iframe');  
    ifrproxy.style.display = 'none';  
    ifrproxy.src = "http://www.baidu.com/proxy.html#data";  
    document.body.appendChild(ifrproxy);  
}

proxy.html:

//由于parent.parent（即baidu.com/a.html）和baidu.com/proxy.html属于同一个域，所以能够转变其location.hash的值  
parent.parent.location.hash = self.location.hash.substring(1);  
题目：数据暴露在URL中，数据大小花样受限

3.HTML5的postMessage要领

a向b发送数据

baidu.com/a.html

window.onload = function() {  
    var ifr = document.getElementById('ifr');  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage('hello world!', targetOrigin);  
};

google.com/b.html

var onmessage = function (event) {  
  var data = event.data;//音讯  
  var origin = event.origin;//音讯来源地点  
  var source = event.source;//源Window对象  
  if(origin=="http://www.baidu.com"){  
console.log(data);//hello world!  
  }  
};  
if (typeof window.addEventListener != 'undefined') {  
  window.addEventListener('message', onmessage, false);  
} else if (typeof window.attachEvent != 'undefined') {  
  //for ie  
  window.attachEvent('onmessage', onmessage);  
} 
同理能够b向a postMessage

单向跨域

1.jsonp

先看两种用法
<script>
    function foo(data){
        console.log(data);
    }
</script>
<script type="http://www.google.com/getUsers.js?callback=foo"></script>
回调函数
<script src="http://www.google.com/getUsers.php?flag=do&time=1"></script>
参数
题目：只支撑get要求

2.效劳器代办

效劳器没有同源战略，在数据供应方没有jsonp,window.name协定的支撑下，运用效劳器代办。
在baidu.com下设置一个代办proxy即baidu.com/proxy/将ajax绑定到代办下发送http要求，此时http要求是在效劳端举行的，无同源限定

3.CORS

var url = 'http://api.alice.com/cors';  
var xhr = createCORSRequest('GET', url);  
xhr.send();
//非简朴要求
var url = 'http://api.alice.com/cors';  
var xhr = createCORSRequest('PUT', url);  
xhr.setRequestHeader(  
    'X-Custom-Header', 'value');
xhr.send(); 
别的：关于CORS的支撑须要效劳器和客户端之间的谐和

4.window.name

5.webSocket

须要效劳器的支撑，源在白名单

6.Access-Controll-Allow-Origin

http和https协定有什么区分，重点诠释https

http+加密+认证+完整性庇护=https

  • http:应用层的无状况，超文本传输协定。端口为80

  • HTTPS：只是http通讯接口部份用SSL和TLS协定替换。http直接和TCP通讯，而HTTPS运用SSL所以是先和SSL通讯，再由SSL和TCP通讯。端口为443

cookie sessionStorage localStorage有什么差别

  • cookie存储在客户端，能够发送给效劳器，数据大小限定为4K

  • sessionStorage,localStorage存储在当地，不能够发送给效劳器，数据大小为5M

  • localStorage只能手动消灭数据

  • sessionStorage封闭会话窗，数据就被消灭了

HTML5当地存储分为

  • webStorage(localStorage,sessionStorage)

  • indexDB

DNS剖析域名为IP

  • 浏览器缓存中找

  • 体系缓存中找

  • 路由器缓存中找

  • ISP DNS缓存中找

TCP三次握手

  • client—–>server:SYN(提议一个TCP衔接，同步报文)

  • server—–>client:SYN+ACK(应对报文，示意已建立衔接)

  • client—–>server:ACK(应对报文，示意收到已衔接)

四次挥手：
    由客户端提议的封闭衔接
        * client----->server:FIN(要求封闭衔接)
        * server----->client:ACK(收到了衔接，但不会马上封闭，比及报文都发送完再复兴一个FIN)
        * server----->client:FIN
        * client----->server:ACK(收到封闭)

    由效劳端提议的封闭衔接
        * 当http设置了keepalive定时封闭，效劳端会在终了数据传送后封闭TCP衔接

http要求

  • 要求行

  • 要求头

  • 空行

  • 要求包体(只要POST要求有包体)

get/post区分

  • 要求参数：get参数附在URL背面?离隔，POST参数放在包体中

  • 大小限定：GET限定为2048字符，post无限定

  • 平安题目：GET参数暴露在URL中，不如POST平安

  • 浏览器历史纪录：GET能够纪录，POST无纪录

  • 缓存：GET可被缓存，post无

  • 书签：GET可被珍藏为书签，post不可

  • 数据类型：GET只能ASCII码，post无限定

http响应

  • 状况行

  • 响应头

  • 响应包体

http状况码
1XX：示意可续发要求
2XX：示意胜利

* 202胜利
* 204胜利 不返回实体主体
* 206胜利 执行了一个局限要求

3XX：示意重定向

* 301永远重定向，增添SEO排名
* 302暂时重定向 制止POST变成GET
* 303别的一个URI
* 304推断是不是要更新缓存 要求头部照顾if-modified-since自从上次更新距此次多久
* 307暂时重定向

4XX：示意客户端毛病

* 400客户端语法毛病
* 401要求未经受权
* 403效劳器拒绝效劳
* 404要求资本不存在

5XX：效劳端毛病

* 500不可预期的毛病
* 503此时不能供应效劳 稍后恢复一般

开释TCP衔接

  • header中的connecton:close

    效劳器主动封闭TCP衔接，客户端被动封闭衔接

  • header中的connecton:keepalive

    衔接坚持一段时间，能够一连发送http要求

客户端剖析HTML

onload ready区分：

  • ready示意文档加载终了，不包括图片

  • onload示意都加载终了

    原文作者：_ipo
    原文地址: https://segmentfault.com/a/1190000007033157
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞