HTTP相关

1.客户端和服务器端是如何通信的

（面试题）

（经典） 从输入URL到页面加载全过程

• DNS解析
• TCP连接
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器解析渲染页面

假设访问的是https://www.baidu.com,enter之后可以看到百度首页面
1）百度页面并没有在客户端本地，是输入地址后请求过来的
2)输入不同的域名可以看到不同的页面
3)有的网址是https,有的是http
4)需要客户端联网才能完成

////////////////////////////////

请求阶段[Request]
1.首先根据客户端输入的域名，到DNS服务器上进行反解析，（通过域名找到对应的外网IP）
2.通过找到的外网IP，找到对应的服务器
3.通过在地址栏输入的端口号（协议有默认的端口号）找到服务器上发布的对应的项目
响应阶段[Response]
4.服务器获取到请求资源文件的地址，找到资源文件中的原代码
5.服务器通过http等传输协议返回原代码给客户端
浏览器自主渲染
6.客户端接收到原代码后，交给浏览器内核（渲染引擎）进行渲染，最后由浏览器绘制出对应的页面

URL、URI、URN

URI : 统一资源标识符
URL: 统一资源路径地址
URN：统一资源名称
URI = URL + URN

一个完整的URL包含很多部分:

第一部分：传输协议

传输协议是用来完成客户端和服务器端的数据（内容）传输的，类似于快递小哥，负责把客户和商家的物品来回传送

HTTP报文

HTTP 报文是面向文本的，报文中的每一个字段都是一些 ASCII 码串，各个字段的长度是不确定的。HTTP 有两类报文：请求报文和响应报文
HTTP的这两种报文都由三部分组成：

• 开始行: 请求开始行 和 响应开始行
• 首部行(头): 请求头（内置、自定义） 和 响应头（内置、自定义） 通用头（包含请求头响应头）
• 实体主体：请求主体 响应主体
  请求XXX都是客户端设置的信息，客户端获取这些信息
  响应XXX都服务器端设置的信息，客户端接收这些信息
  客户端传递给服务器端数据：
  1.设置响应头
  2.设置响应主体
  3.URL传参
  ......
  服务器端传递给客户端数据：
  1.设置响应头（例如服务器时间）
  2.设置响应主体
  ........

第二部分：域名

设置域名其实就是给不好记忆的服务器外网IP设置一个好记忆的名字
顶级域名（一级域名）：qq.com
二级域名：www.qq.com、v.qq.com、sports.qq.com基于顶级域名
三级域名：kbs.sports.qq.com...

第三部分：端口号

在服务器发布的时候，可以通过端口号区分当前服务器上的不同项目
一台服务器上端口号取值范围：0-65535之间，若电脑上安装很多程序，有一些端口号会被占用
HTTP：默认端口号80
HTTPS: 默认端口号443
FTP：默认端口号21
如上三个端口号若被其他程序占用，我们就不能使用了；所以服务器上一般禁止安装其他程序

第四部分：请求资源文件的路径名称

/
在服务器发布项目的时候，一般都会配置一些默认文档，即使用户不输入请求文件的名称，服务器也会找到默认文档(index/defalut....)
通常为了做SEO优化，会对一些动态页面的地址(xxx.php, xxx.aspx, xxx.asp, xxx.jsp...)进行伪URL重写(需要服务器处理)
https://item.jd.com/4325427.html
1）由后台语言根据详情页模板动态生成具体详情页
2）当前页面就是一个页面，例如detail.html.....做详情页的时候，开发时按照detail.html?id=4325427来开发的，但这种页面不方便做SEO优化，此时把真实地址进行重写，重写为我们看到的4325427.html

第五部分：问号传参

把一些值通过xxx=xxx的方式放在URL的末尾，通过问号传递
[作用]
1） 在AJAX请求中可以通过问号传递参数的方式，客户端把一些信息传递给服务器，服务器根据传递信息的不一样，返回不同的数据

// => $.ajax(url, {});
// => $.get(url, function(){});  对于AJAX请求的特殊写法，原理还是基于AJAX实现的
$.ajax({
  url: 'getPersonInfo?id=12';
});
// => 当前案例中，传递给服务器的编号是多少，服务器就会返回相应的人员信息

2）消除AJAX请求中GET方式缓存

$.ajax({
  url: 'xxx?_=0.123456';
  method: 'get';
});

=> 在请求URL的末尾追加一个随机数 _=随机数，保证每次请求的URL都是不一样的，以此来消除GET请求遗留的缓存问题。
3）通过URL传递参数的方式，可以实现页面之间信息的通信，例如：我们有两个页面A/B，A是列表页，B是详情页，点击A中的某一条信息进入唯一的详情页B，这种操作可以通过传递参数来实现。
实现通信的几种方式：

• URL中?传参
• 本地缓存（登陆模型：当用户登陆成功，将用户的用户名密码等保存到本地缓存中，其他页面可从缓存中拿出来使用）
• iframe

第六部分：HASH值

#xxx
URL末尾传递的井号，就是HASH值
[作用]
1）页面中的锚点定位
2）前端路由（SPA但页面开发）