前后端分离

272 阅读3分钟

http协议

  • 概念
    html 超文本标记语言
    http协议:超文本传输协议。 规定规定前后通讯方式,也就html文本或数据如何在网络传输.
    http基于请求响应模式的,无状态无连接应层协议

  • 特点:
    客户端/服务端模式
    速度快
    灵活 传输数据类型任意
    无连接
    无状态

  • url地址
    统一资源定位符
    格式: http://ip:port/path/resoure
      ip: 网络中唯一标识一台电脑
      port: 端口号 同一台电脑中区分不同应用程序
      path: 路径
      res: 资源
    域名: www.baidu.com:80
      默认端口 80, 可以不写

  • DNS服务器 域名解析服务器
    www.baidu.com - 10.78.139.23
    www.qianfeng.com - 29.178.139.23

  • http工作过程
    1.建立连接
    2.发送请求
    3.响应数据
    4.断开连接

    • 建立连接
      建立稳定可靠的连接
      三次握手
    • 发送请求
      请求包: 一串有格式的文本字符串
      格式: 请求行 请求头部 请求正文
        请求行: method请求方法 url http协议版本
        请求头部:key1:value1
             key2:value2
             content-type:application/x-www-form-urlencoded
             xhr.setRequestHeader('contentt-type','application/x-www-form-urlencoded')
      请求正文
  • 响应数据
    响应包:一串有格式的文本字符串
    格式:状态行 响应头部 响应正文
    状态行:版本 状态码 状态码描述
           200
           4xx
           5xx
    响应头部: context-type
    响应正文

  • 断开连接
    A ------------ B

  • 四次挥手

接口文档

   接口文档
       client   <->   server
          
   1.商品列表接口 
        url: http://ip:port/goods/list
        method: get
        参数: 无
        响应: { list:[] }    
        
   2. 商品详情接口
        url: http://ip:port/good/detail
        method: get
        参数: id=1
        响应: { name:'' , price: 19, ....}

   3. 订单接口
   4. 购物车接口
   5. 支付接口
   6. 登录
   7. 注册
   

传输内容类型content-type

协议规定post提交的数据,必须包含在消息主体中entity-body中,但是协议并没有规定数据使用什么编码方式。开发者可以自己决定消息主体的格式。
数据发送出去后,需要接收的服务端解析成功,一般服务端会根据content-type字段来获取参数是怎么编码的,然后对应去解码。

  • application/x-www-form-urlencoded
    在最开始的请求方式中,请求参数都是放在ur|中,表单提交的时候,都是以key=&value=的方式写在url后面。这也是浏览器表单提交的默认方式。
  • multipart/form-data
    此种方式多用于文件.上传,表单数据都保存在http的正文部分,各个表单项之间用boundary分开。
  • application/json
    现在越来越多的应用使用application/json,用来告诉服务端消息主体是序列化的json字符串。由于json规范的流行,各大浏览器都开始原生支持ISON.stringty.

编码

encodeURICompoent()编码
decodeURICompoent()解码

转义用于分隔URI各个部分的标点符号

var s = "c.biancheng.net/navi/search。asp?keyword=URI" ;
b = encodeURICompoent(s);//biancheng.net%2Fnavi%2Fsearch.asp%3Fkeyword3DURI
b = decodeURICompoent(b);//"c.biancheng.net/navi/search.asp?keyword=URI";