原文：前端面试“http全过程”将所有HTTP相关知识抛出来了...
来一篇串通，一个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表示都加载完毕
时间： 2024-10-13 00:10:16