详细了解前后端交互B/S，细的不能在细了

详情前后端交互B/S

一 先了解软件的架构

C/S-客户端，服务器
客户端就是指用户，谁用是谁。
服务器就是负责处理软件的业务逻辑–就相当于网络。
我们一般用的都是c/s架构。Eg:qq.微信等
特点：
1 使用前必须安装，
2 软件更新时，服务器和客户端同时更新
3 C/S架构的软件不能跨平台使用–开发成本高
4 C/S架构的软件客户端和服务器通信采用的是自有协议，相对来说比较安全。
B/S-浏览器，服务器
本质上也是C/S。只不过B/S架构的软件，使用浏览器作为软件的客户端。他通过访问网页的形式来使用软件。
特点：
1 不需要安装，直接在浏览器上访问指定的网址就可以
2软件更新时，客户端不用更新
3 软件可以跨平台，只要有浏览器们就可以使用
4 b/S架构的软件，客户端与服务器之间通信采用的是http协议，相对来说不安全。后来就有了https加密协议，改变了安全性。

二 http协议–超文本传输协议(Hyper Text Transfer Protocol)的简单知识

http是一个简单的请求-响应协议，它通常运行在TCP（传输控制协议（Transmission Control Protocol））之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式
HTTP协议是基于C/S架构进行通信的，而HTTP协议的服务器端实现程序有httpd、**nginx等，其客户端的实现程序主要是Web浏览器，例如Firefox、InternetExplorer、Google chrome、Safari、Opera等，此外，客户端的命令行工具还有elink、curl等。Web服务是基于TCP的，因此为了能够随时响应客户端的请求，Web服务器需要监听在80/TCP端口。这客户端浏览器和Web服务器之间就可以通过HTTP协议进行通信了。浏览器会自动添加80端口号

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。浏览器会自动添加443端口号

三 简单了解一下什么是C/S和B/S之后
那么WEB前端是什么，后端是什么，他们之间又是怎么来完成交互的：
1前端：就是通过在页面上绑定的事件，获取到用户的信息，把信息传递给后端，让后端存储起来，同时把后端给的数据展示在页面上。
1后端：当前端需要数据的时候，后端从数据库拿到数据给前端，同时把前端传进来的数据存到数据库里。注意的是：数据库是专门让后端进行数据的 增 删 改 查 的。并且前端是不能够操作数据库的，我们只有通过和后端的相互交互来实现共同的效果。

流程：前端-后端-数据库-后端-前端。

四．了解一下服务器 前端了解一下就可以了
服务器就是一台存在在网络另一头的电脑，只不过他运行的环境是比较特殊的。（运行了一个特殊的软件）
它的作用：
也就是在一台电脑它运行了一个特殊的环境之后，m那么它就会开放一个空间，但是考虑到安全性的问题，只能得到是-读的权限。这个空间就叫做服务器空间。
在真是的开发中，就是运行的是后端代码 B S开发模型，也就是运行服务端代码的。
这就回到了前边说的B/S.
B浏览器，专门用来运行前端代码的
S服务器，专门用来运行后端代码的。
如果我们写了一个后端代码，那么就需要在服务器上运行，因为浏览器不支持后端代码运行。

前后端实现交互规则：传输协议（http/https）+域名(IP地址的高辨识度名字)+端口号（默认80/443）

五 http协议的请求步骤 必须的一个都不能少 4个步骤

1 建立连接；基于TCP/IP协议三次握手，保障前后端的正常通信
2 前端发送请求
-（请求行-get、post,请求路径，传输协议版本http/1.1）
-（请求头部：对请求的信息描述）
-（请求空行：分割请求头和请求体的空行）
-（请求数据：请求体）
3 后端返回响应
-（响应状态行：
传输协议：http/1.1
状态码：200
状态码的简单描述 OK）
-（响应报文头：本次响应的描述信息）
-（响应报文体：后端给前端的数据）
**4 断开连接：**基于TCP/IP协议四次握手，保证不再进行通讯了。
http状态码
常见的状态码
200，请求成功
301，资源网页等被永久转移到其他URL
404，请求的资源网页等不存在
500，内部服务器错误

http状态码分类 由三个十进制数字组成，第一个十进制数字定义状态码的类型，后两个数字没有分类的作业。
描述
1** 信息，服务器收到请求，需要请求者继续执行操作
2** 成功，操作被成功接收并处理
3** 重定向，需要进一步的操作完成请求
4** 客户端错误，请求包含语法错误，或者无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误

六

到底怎样实现前端和后端的交互呢，或者说通过怎样的方法和手段实现交互，怎么请求交互，交互的原理是什么？

想要实现交互就要有交互的对象.下边的东西必须会。
ajax创建交互式 Web 应用程序而无需牺牲浏览器兼容性的流行方法
1创建一个ajax对象，实例化对象
var xhr=new XMLHttpRequest（）；
2 配置本次请求信息
xhr.open（‘请求方式’,’请求地址’，异步/同步）;
3 接受请求响应
xhr.οnlοad=function(){
console.log(xhr.responseText)
}
4 发送请求
xhr.send()

在open（）信息中，有三个参数
第一个参数：请求方式一般有8种。但是我们常用的请求方式get ，post 两种。
第二个参数：请求地址：url代表我们要传进去的网址。
第三个参数一般不写，默认的是true。代表异步。（当代码遇到一步的时候，会先执行完同步再回执行异步。）
所以xhr.open(‘get’,’url’)

为了验证ajax的状态是否执行。或者说ajax处于哪一个步骤，我们也通过ajax的状态码来判断。
此时我们可以通过ajax事件–onreadystatechange 事件，当ajax的状态码改变的时候触发。同时还要考虑到兼容性的问题。
获取ajax状态码–ajax对象.readyState
0 代表创建的ajax对象成功
1代表配置的请求信息成功（open）
2 代表响应体已经回到浏览器（但是还不能使用，因为还缺一个响应报文。）
3 浏览器正在解析响应报文，（把响应报文里的响应体进行分离）
4 浏览器分离响应体成功，可以正常使用，请求结束。
代码如下：
1 给一个url地址
let url=’’ ;//这个地址就是后端给的地址，也就是后端写的。
2 创建ajax事件
var xhr=new XMLHttpRequest();//0 创建的ajax对象成功
4 ajax状态码改变的事件
xhr.onreadystatechange=function(){
//只要ajax状态码改变就会触发
console.log（xhr.onreadystatechange）//直接打印ajax状态码
//判断它的状态码是否符合条件
if(xhr.readyState=2){
//判断等于2就证明响应报文回到了浏览器，但是还没有解析，也就还不能使用
Console.log(‘成功就会打印2’)
console.log（xhr.responseText）//打印响应体
}
if(xhr.readyState=4){
//判断等于4的时候，就证明浏览器已经解析完毕，可以正常使用响应体。
console.log(‘成功就会打印4’)
}
}
3 配置请求信息
xhr.open(‘get’,url,true)//1 代表请求的信息成功
5 发送请求
xhr.send();//2 3 4 响应体回到浏览器-浏览器解析报文-浏览器分离响应体成功

补充6 兼容ie
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&/^\d{2}$/.text(xhr.status)){
console.log(‘状态码为4’);
console.log(xhr.status);
console.log(responseText)
}

上面我们还说到，open的配置信息里有请求方式get/post 虽然是常用的，但是他们二者之间还是有很大的区别的。

下面我们 分别来解析
Get 方式的请求方式
xhr.open (‘get’, ’url’)
此处的url我们假设值为：’www .abcd.get.php?a=12&b=2&c=3’
注意：get.php 后边的？是一个分割符号。用来分割后边的参数信息。
一个参数的时候是key=value .当多个参数在一起的时候就用&符号连接。即：xxxxx?Key=value1&key1=vlaue1&key2=vlaue2
注意的是：get携带参数必须是url编码的格式，如果不是，会自动转换成url的编码。

**Post 方式
这种方式跟get 不同
Post在请求时，携带在请求体里，也就是send（），而外边的open（）就不用我们拼接，那么我们就把携带的请求体放在send（）里面。参数的格式就不用在加 ？分割。
注意：post携带参数理论上不受限制，但还是要和请求头里的content-type一致。
那么我们怎么办呢–我们只要在发送之前（也就是send（）之前）设置一下请求头里的content-type就可以了。请求头的书写方式就使用ajax的方法：
//1 创建ajax对象
var xhr=new XMLHttpRequest();
//2配置请求信息
xhr.open(‘post’,‘url后端给的地址’)；
//3 接受响应
xhr.οnlοad=function(){
console.log(xhr.responseText);
}
//在发送请求之前设置请求头
xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);
//4 发送请求
xhr.send(‘c=23&d=22&e=1’)
当我们的传输协议、域名、端口号。有任意一个不一样的时候都会触发一个策略，就做同源策略，这个策略是浏览器发送请求给的限制。
就例如我们的localhost和127.0.0.1是指向同一个地址的，但是这是两个域名，就会报错。针对这样的错误，我们就有了跨域请求的方案来解决。（3种）
1 jsonp跨域请求–通过src 的引入方式。
2 cors跨域资源共享：由服务端进行配置，表示允许某一客户端请求，客户端依旧使用ajax方式进行发送请求。
3 代理跨域–浏览器不允许非同源的请求，
解析：
1 jsonp跨域请求
Script标签会把请求回来的所有内容当做js代码来执行。
Script标签默认有一个type属性，值是text/javascript,不管src请求什么文件，都会把文件里面的内容当做字符串读取出来。
Script标签的src属性不受同源策略的影响。

2 cors 跨越
是浏览器不让我们请求其他服务器，如果其他无服务告知了浏览器可以请求，那么才不会被阻止。
3 代理跨域proxy（服务器正向代理）–浏览器不允许请求非同源地址。
解决方法
1 在浏览器同源设置一个代理服务器
2把本要发给 目标服务器的请求，发给 代理服务器
3 由代理服务器 转发给目标服务器
4 目标服务器把响应返回给代理服务器
5 代理服务器在把响应给浏览器。这样就完成了。
注意的是：代理服务器的格式一定要正确
切换版本操作：
1 操作：phpstydy窗口–绿色的切换版本–5.4.45nts+nginx -重启
注意：不能带中文，只要带中文就会把报错
2 点击其他选项菜单 --配置文件–nginx-conf文件。
在56行找到server的闭合大括号
这个闭合大括号的上面一行书写代理配置（注意空格一定要有）
/ljk 随便定代理标识符
/也一定要有
{}括号里的哪个地址，就是我们要跨越请求的地址(目标服务器的地址)
最后的分号;一定要有
空格也一定要有
路径一定要完整

  location = /ljk {
    proxy_pass http://127.0.0.1/day4/server/proxy.php;
}

这样的前后端基本的交互也就完成了。