详解前后端交互B/S

（一）了解服务器
就是一台网络那一头的一台电脑，只不过运行了一些特殊的环境（运行了一个特殊的“软件”）

服务器的作用：
当一台电脑运行了一个服务器环境后，那么就会开放一个服务器空间，其他人就可以根据网线找到你这台电脑找到对应的服务器空间，只能得到只读的权限。
B浏览器，专门用来运行前端代码。
S服务器，专门用来运行后端代码。
如果我们写了一个后端代码，那么需要在服务器环境下运行。

（二）了解传输协议
前后端实现交互规则：传输协议（http/https）+域名(IP地址的高辨识度名字)+端口号（默认80/443）。
一个http请求步骤：
（1）建立连接，基于TCP/IP协议的三次握手
（2）前端发送请求
1.请求行：GET请求方法、请求路径、传输协议版本http/1.1
2.请求头：对本息请求进行一些描述性的信息
3.请求空行：分隔请求头和请求体的一个空行
4.请求体：前端给后端的数据
（3）后端响应
1.响应状态行：http/1.1传输协议版本、响应状态码、对响应状态码的简单描述
2.响应报文头：对本息响应的一些描述性的信息
3.响应报文体：后端给前端返回的数据
（4）断开连接：基于TCP/IP协议的四次挥手

http常见的状态码
200，请求成功
301，资源网页等被永久转移到其他URL
404，请求的资源网页等不存在
500，内部服务器错误

（三）利用ajax方法实现前后端交互
ajax是js和php交互的手段
（1）发送一个ajax请求

//1.创建一个ajax对象
var xhr=new XMLHttpRequest( )
//2.配置请求信息
xhr.open(‘请求方式’,’请求地址’，异步/同步)
//3.发送请求
xhr.send( )
//4.接收响应
xhr.onload=function( ){
这里得到的就是后端返回的数据
}

为了验证ajax的状态是否执行，或者说ajax处于哪一个步骤，我们也通过ajax的状态码来判断。
通过ajax事件–onreadystatechange 事件，当ajax的状态码改变的时候触发。
0: 表示你创建一个 ajax 对象成功了
1: 表示配置请求信息成功了(也就是执行完 open)
2: 表示响应体已经回到了浏览器, 但是还不能使用(因为此时还是一个响应报文)
3: 浏览器正在解析响应报文(把响应报文里面的响应体分离出来)
4: 浏览器分离响应体成功, 已经可以正常使用了(本次请求结束了)
代码如下：

    //1. 创建 ajax 对象
    var xhr = new XMLHttpRequest() // => 0
    // ajax 状态码改变的事件
    xhr.onreadystatechange = function () {
      // 只要 ajax 状态码改变了就会触发
      console.log(xhr.readyState) // 直接打印 ajax 状态码
      if (xhr.readyState === 2) {
        // 响应报文回到了浏览器, 但是没有经过解析还不能使用的时候
        console.log('2222222222222222222')
        console.log(xhr.responseText) // 打印响应体
      }
      if (xhr.readyState === 4) {
        // 浏览器已经解析完毕了, 可以正常使用相应体了
        console.log('4444444444444444444')
        console.log(xhr.responseText) // 打印响应体
      }
    }
    // 2. 配置请求信息
    xhr.open('GET', './ajax.php')1
    // 3. 发送请求
    xhr.send()

（2）发送一个带有参数的GET请求

 //1. 创建 ajax 对象
    var xhr = new XMLHttpRequest()
 // 2. 配置请求信息
    xhr.open('GET', './server/get.php?a=100&b=200&c=300')
 //3. 接受响应
    xhr.onload = function () {
      console.log(xhr.responseText)
    }
 // 4. 发送请求
xhr.send( )

（3）发送一个带有参数的POST请求

  //1. 创建 ajax 对象
    var xhr = new XMLHttpRequest()
  //2. 配置请求信息
    xhr.open('POST', './server/post.php')
  //3. 接受响应
    xhr.onload = function () {
      console.log(xhr.responseText)
    }
  //4-0. 发送请求之前, 设置一下请求头
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
  //4. 发送请求
    xhr.send('d=400&e=500') // 携带了两个参数, d 和 e

GET 和 POST 请求的区别:
GET
1. 倾向于向服务器获取数据
2. 直接再地址后面进行拼接(请求体是空的)
3. 大小限制为 2KB 左右(因为 IE 最多传递 2KB)
4. 会被浏览器主动缓存
5. 相对于 POST 不是很安全(明文发送)
6. 数据格式必须是 url 编码的格式, 如果不是会自动转换成 url 编码

POST
1. 倾向于向服务器传递数据
2. 再请求体里面传递过去(地址后面没有)
3. 理论上是没有限制(但是可以被服务器限制)
4. 不会被浏览器主动缓存, 需要手动设置
5. 相对于 GET 比较安全的(暗文发送)
6. 数据格式理论上我所谓, 但是要和请求头中的 content-type 一致
=> 请求头里面的 content-type 表示请求体的数据格式

（四）跨域请求
当我们的传输协议、域名、端口号。有任意一个不一样的时候都会触发一个策略，就做同源策略，这个策略是浏览器发送请求给的限制。针对这样的问题，我们就有了跨域请求的方案来解决。

（1）jsonp跨域请求–通过src 的引入方式
script标签会把请求回来的所有内容当做js代码来执行。
script标签默认有一个type属性，值是text/javascript,不管src请求什么文件，都会把文件里面的内容当做字符串读取出来。
script标签的src属性不受同源策略的影响。

（2）cors跨域资源共享
由服务端进行配置，表示允许某一客户端请求，客户端依旧使用ajax方式进行发送请求。
如果别人家的服务器告诉浏览器, 我允许这个域名请求我， 浏览器就管不着了, 就可以正常请求了。

（3）代理跨域–浏览器不允许非同源的请求
在浏览器同源设置一个 代理服务器
1.把本该发送给目标服务器的请求发送给 代理服务器
2.由 代理服务器 转发请求给 目标服务器
3.目标服务器把响应返回给 代理服务器
4.代理服务器 在把响应给到 浏览器

“家中逆战，无畏疫情！”