前后端交互技术与HTTP协议

Web端交互协议_HTTP

前后端是如何进行交互的

1. 通信协议（Communication Protocol）是指通信双方对数据传送控制的一种约定。
2. 前端与服务端的数据传输是基于HTTP协议的，HTTP协议是基于请求响应模型，它是为 Web 浏览器与 Web 服务器之间的通信而设计的。
3. 请求响应模型
   1. 先有请求，再有响应
   2. 请求和响应是成对出现的，一个请求对应一个响应

HTTP和HTTPS

1. HTTP是一个用于传输超媒体文档（例如 HTML）的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的。
2. HTTPS（Hypertext Transfer Protocol over Secure Socket Layer）简单讲是HTTP的安全版，在HTTP下加入SSL层。
3. SSL（Secure Sockets Layer 安全套接层）主要用于Web的安全传输协议，在传输层对网络连接进行加密，保障在Internet上数据传输的安全。
   1. HTTP默认端口号为80
   2. HTTPS默认端口号为443
4. HTTP通信由两部分组成：客户端信息和服务器响应信息

HHTP请求解析

HTTP请求信息组成部分

HTTP请求信息由请求行，请求头部，空行，请求体四个部分组成

1. 请求行（request line）
   1. 请求方式
   2. URL
   3. HTTP协议版本
2. 请求头部（header）
   1. 用来描述客户端的基本信息，从而把客户端的相关信息告知服务器
   2. 由多行键值对组成，每行的键和值之间用英文冒号分隔
   3. 常见的请求头信息：

1. 请求体
   1. 请求体存放的，是通过POST方式提交到服务器的数据

只有POST请求才有请求体，GET请求没有请求体

浏览器发送HTTP请求的过程

1. 当用户在浏览器的地址栏中输入一个URL并按回车键之后，浏览器会向HTTP服务器发送HTTP请求。HTTP请求方式主要分为"Get"和"Post"两种方法。
   1. 在浏览器的地址输入URL访问服务器，这种请求方式是属于GET请求。
   2. URL（Uniform / Universal Resource Locator的缩写）：统一资源定位符，是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。
2. 当我们在浏览器输入URLhttp://localhost:8081/biwu_edu/index.html的时候，浏览器发送一个请求去获取http://localhost:8081/biwu_edu/index.html的html文件，服务器把文件通过网络传输给浏览器。
3. 浏览器解析服务端响应回来的HTML，发现其中引用了很多其他文件，比如图片，CSS文件，JS文件，浏览器会自动再次发送请求去获取图片，CSS文件，或者JS文件。
4. 请求基本格式：scheme://host[:port#]/path/…/[?query-string]`
   1. - scheme：协议(例如：http, https, ftp)
   2. - host：服务器的IP地址或者域名
   3. - port#：服务器的端口（如果是走协议默认端口，缺省端口80）
   4. - path：访问资源的路径
   5. - query-string：参数，发送给http服务器的数据
      1. eg：京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！

请求方法

常用方法：GET,POST

1. GET是从服务器上获取数据，POST是向服务器传送数据
2. GET请求参数显示，都显示在浏览器网址上，HTTP服务器根据该请求所包含URL中的参数来产生响应内容，即“Get”请求的参数是URL的一部分。 例如： Chinese_百度搜索
3. POST请求参数在请求体当中，消息长度没有限制而且以隐式的方式进行发送，通常用来向HTTP服务器提交量比较大的数据（比如请求中包含许多参数或者文件上传操作等），请求的参数包含在“Content-Type”消息头里，指明该消息体的媒体类型和编码

**注意：使用Get方式提交表单，因为有可能会导致安全问题。 比如说在登陆表单中用Get方式，用户输入的用户名和密码将在地址栏中暴露无遗。**

如何区分GET请求和POST请求

• 1.通过浏览器地址栏提交url，这种方式是属于get请求
• 2.通过超链接的方式提交请求，也是属于get请求
• 3.除了form的method=post，其它的方式都是属于get请求

HTTP响应解析

HTTP响应也由四个部分组成，分别是：

1. 状态行
2. 响应头信息
3. 空行
4. 响应正文

响应状态码

1. HTTP响应状态码（HTTP Status Code）也属于HTTP协议的一部分，用来标识响应的状态
2. 响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了。

响应状态代码由三位数字组成（范围是100-599），第一个数字定义了响应的类别，后两个数字用来对状态码进行细分。HTTP 状态码共分为 5 种类型：

• 100-199：表示服务器成功接收部分请求，要求客户端继续提交其余请求才能完成整个处理过程。
• 200-299：表示服务器成功接收请求并已完成整个处理过程。
  1. 1. 200：请求成功，对应的英文描述OK
     2. 201：已创建，请求成功并创建了新的资源，对应的英文描述Created
• 300-399：请求重定向
  1. 301：请求的资源已被永久的移动到新的URI，返回信息会包括新的URI，浏览器会自动定向到新URI，后面新的请求都会使用新的URI代替。对应的英文描述Moved Permanently
  2. 302：所请求的页面已经临时转移至新的url，对应的英文描述Found
  3. 304：使用缓存资源服务端未修改，服务端返回此状态码时，不会返回任何资源（响应消息中不包含响应体），客户端会从本地缓存中打开资环，对应的英文描述Not Modified
• 400-499：客户端的请求有错误（前端需要关注的
  1. - 400：请求语法格式错误当前请求无法被服务端理解，例如请求参数错误。对应的英文描述Bad Request
  2. - 401：当前请求需要用户验证。对应的英文描述Unauthorized
  3. - 403：服务器拒绝请求，权限不够，对应的英文描述Forbidden
  4. - 404：请求资源不存在，对应的英文描述Not Found（最常见）
  5. - 408：请求超时。服务器等待客户端发送的请求时间过长，超时。对应的英文描述Request Timeout
• 500-599：服务器端出现错误，常用500（请求未完成。服务器遇到不可预知的情况），与客户端无关，是属于服务端内部问题。（服务端端问题与前端没关系）
• 更多响应码：HTTP_百度百科

前后端交互技术_Ajax异步请求

同步请求和异步请求

1. 同步请求：发送请求后需要等待服务端响应，同步请求阻止代码的执行，这会导致屏幕上出现“冻结”和无响应的用户体验。
2. 异步请求：当请求的响应数据完全收到之时，会执行一个指定的回调函数，而在执行异步请求的同时，浏览器会正常地执行其他事务的处理。

Ajax概述

AJAX 是异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）。简单点说，就是使用XMLHttpRequest 对象与服务器通信。它可以使用 JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

Ajax特性

- 在不重新加载页面的情况下发送请求给服务器。

- 接受并使用从服务器发来的数据。

XMLRequest对象

是Ajax的核心，XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

Ajax提交get请求

Ajax提交post请求

JSON与JavaScript互转

FromData对象的使用

1. FromData接口提供了一种表示表单数据的键值对 `key/value` 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send()方法发送出去，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 `"multipart/form-data"`，它会使用和表单一样的格式。
2. FormData 的 `get()` 方法用于返回 FormData 对象中和指定的键关联的第一个值，如果你想要返回和指定键关联的全部值，那么可以使用 getAll()
3.