前后端如何通信
前后端如何通信
前段：客户端
后端： 服务器端
所谓的全栈，其实是你可以实现客户端和服务器端程序的编写，而且可以实现俩端之间的通信
客户端和服务器端是如何通信的？
自己做一个技术博客
本地开发（当前项目可以在本地预览）
部署到服务器上，让别人可以通过域名或者外网访问
- 购买一台服务器（阿里云独立主机，虚拟服务器等）https.//wanwang.aliyun.com/
- 购买域名
- 把自己做的项目传到服务器上
- 让域名和服务器关联（DNS解析或是域名解析）
- 在服务器上发布或者部署我们的项目（iis，nginx，apache。。。。。）
做一些推广（SEO推广。友情链接交换，技术文章持续更新。。。）
经典面试题：当我们在浏览器地址栏中输入一个URL地址，到最后看到页面，中间都经历了那些
1.假设我们访问的是：
https://www.baidu.com/这个地址，按下ENTER键后，我们可以看到百度首页面
1）百度页面并没有在我们自己的客户端本地。我们是输入地址后，才请求过来的
2）输入不同的域名可以看到不同的页面
3）有的网址是https，有的是http
4）需要客户端联网才能完成这些事情----------------------
都经历那些事情
[Request请求阶段]
1）首先根据客户端输入的域名，到DNS服务器上进行反解析（通过域名找到对应服务器的外网ip）
2）通过找到的外网ip。找到对应的服务器
3）通过在地址栏中输入的端口号（没有输入是因为不同协议有自己默认的端口号）找到服务器上发布的对应的项目
[Response响应阶段]
4）服务器获取到请求资源文件的地址例如 ：/stu/index.html。把资源文件中的源代码找到
5）服务器端会把找到的源代码返回给客户端（通过HTTP等传输协议返回的）
[浏览器自主渲染]
6）客户端接受到源代码后，会交给浏览器的内核（渲染引擎）进行渲染，最后由浏览器绘制出对应的页面
URL . URI . URN
URI：统一资源标识符
URL：统一资源路径地址(在当前页面控制台输入：document.location.href)就可以得到当前页面的URL
URN：统一资源名称
URI=URL +URN一个完整的URL包含很多部分
http://www.html5train.com/stu/index.html?name=zf&age=9&teacher=zxt#good
第一部分：传输协议
传输协议是用了完成客户端和服务端的数据（内容）传输的，类似于快递小哥，负责把客户和商家的物品来回传送
1：客户端不仅可以向服务器发送请求，而且还可以把一些内容传递给服务器
2：服务端也可以把内容返回给客户端
客户端和服务端传输的内容总称HTTP报文，这些报文信息都是基于传输协议完成传输的，客户端传递给服务器叫做请求（request），服务器返回给客户端叫做响应（ response），request+response俩个阶段统称为一个HTTP事务（事务：一件完整的事情）
THTP事务
1：当客户端向服务端发送请求，此时客户端和服务端会建立一个传输通道（链接通道），传输协议就是基于这个通道把信息进行传输的
2：当服务器端接受到请求信息，把内容返回给客户端后，传输通道会自动销毁关闭
传输协议分类
http:超文本传输协议（客户端和服务端传输的内容除了文本以外，还可以传输图片，音视频等文件流[二进制编码/BASE64吗]，以及传输XML格式的数据等），是目前市场上应用最广泛的传输协议
http：http SSL，它比http更加安全，因为数据内容的传输通道是经过SSL加密的（它需要在服务器端进行特殊的处理），所以涉及资金类的网站一般都是https协议的
FTP：资源文件传输协议：一般用于客户端把资源文件（不是代码）上传到服务器端，或者从服务器端下载一些资源文件（FTP传输的内容会比http这类协议传输的内容多）
HTTP报文
1：起始行
- 请求起始行
- 响应起始行
2:首部（头）
- 请求头：内置请求头，自定义请求头
- 响应头：内置响应头，自定义响应头
- 通用头：请求和响应都有的
3：主体
- 请求主体
- 响应主体
1：请求xxx都是客户端设置的信息，服务器端获取这些信息
2：响应xxx都是服务端设置的信息，客户端用来接受这些信息
3：在谷歌浏览器控制台network选项中，我们可以看见当前客户端和服务器端交互的全部信息
``总结
客户端传递给服务器端数据
- 1：URL问号传递参数
- 2：设置请求头
- 3：设置请求主体
服务器端返回给客户端
- 1：设置响应头（例如服务器时间）
- 2：设置响应主体
第二部分：域名
设置域名其实就是给不好记忆的服务器外网ip设置了一个好记忆的名字
- 顶级域名（一级域名）:qq.com
- 二级域名：www.qq.com v.qq.com .....
- 三级域名：kbs.sports.qq.com ......
- .....
第三部分：端口号
在服务器发布项目的时候，我们可以通过端口号区分当前服务器上不同的项目
一台服务器的端口号取值范围：0~65535之间，如果电脑上安装了很多程序，有一下端口号是被占用了
HTTP：默认端口号80
HTTPS：默认端口号443
FTP：默认端口号21对于上述三个端口号其实是很重要的，如果被其他程序占用，我们则不能使用了；所以服务器上一般是禁止安装其他程序的
第四部分：请求资源文件的路径名称
/stu/index.html
在服务器中发布项目的时候，我们一般都会配置一些默认文档：用户即使不输入请求文件的名称。服务器也会找到默认文档（一般默认文档都是index/default...）
我们通常为了做SEO优化，会把一些动态页面的地址（xxx.php, xxx.aspx........）进行伪URL重写（需要服务器处理的）http://item.jd.com/4325427.html
不可能是有一个商品，自己就单独写一个详情页面，肯定是同一个详情页做的不同处理1）第一种方案：
由后台语音根据详情页模板动态生成具体的详情页面
2）第二种方案
当前页面就是一个页面，例如：detail.html/detail.php.....，我们做详情页面的时候，开发是按照detail.html?id=4325427来开发的，但是这种页面不方便做SEO优化，此时我们把真实的地址进行重写，重写为我们看到的4325427.html
第五部分：问号传参
?name=zf&age=9.....
把一些值通过xxx=xxx的方式，放在一个URL的末尾，通过问号传递【作用】
1：在AJAX请求中，我们可以通过问号传参数的方式，客户端把一些信息传递给服务端，服务器根据传递信息的不一样，返回不同的数据
//=>$.ajax(url,{});
//=>$.get(url,function(){});对于AJAX请求的特殊写法，原理还是基于AJAX方法实现的 $.post/$.script......
$.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问号传递参数来实现了
例如：
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471087
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471086
在进入到game.htm页面的时候，我们可以获取URL传递的参数值，根据传递参数值的不一样，从服务器端获取不同的数据展示在列表页面进行页面跳转的时候，我们需要记住的是跳转的同时传递不同的参数值
<a href= 'game.html?mid=xxxx'>
第六部分：HASH值
#xxx
URL末尾传递的井号就是HASH值（哈希值）
作用:
1:页面中错点定位
2：前端路由（SPA单页面开发）
