web全栈架构师[笔记] — 02 数据交互

时间:2021-08-29 21:58:14

数据交互

一、http协议

  • 基本特点
    • 1、无状态的协议
    • 2、连接过程:发送连接请求、响应接受、发送请求
    • 3、消息分两块:头、体
  • http和https

二、form

  • 基本属性
    • action——提交到哪儿
    • method——GET/POST/PUT/DELETE/HEAD
      • GET:获取数据、把数据放在url里面传输、数据量很小、有缓存
      • POST:发送数据、把数据放在body里面传输、数据量大、不会缓存
      • PUT:发送数据
      • DELETE:删除数据
      • HEAD:让服务器之发送头回来就行(不需要内容)
    • name:提交数据的名字
    • enctype
      • application/x-www-form-urlencoded:默认值,适合发送小数据,结构 名字=值&名字=值&...
      • multipart/form-data:文件上传、大数据,结构 分块
      • text/plain

三、ajax

  • 原理 XMLHttpRequest,不兼容IE6

    • 1.创建对象
    • 2.连接
    • 3.发送
    • 4.接受
        function ajax (){
      2 // 1.创建对象
      3 let xhr = new XMLHttpRequest();
      4 // 2.连接
      5 /*
      6 * open(method,url,async):规定请求的类型、URL 以及是否异步处理请求
      7 * method:请求的类型;GET 或 POST
      8 * url:文件在服务器上的位置
      9 a * sync:true(异步)或 false(同步)
      10 */
      11 xhr.open('GET','./data/1.txt',true);
      12 // 3.发送
      13 /*
      14 * send(string):将请求发送到服务器
      15 * string:仅用于 POST 请求
      16 *
      17 * setRequestHeader(header,value):向请求添加 HTTP 头
      18 * header: 规定头的名称
      19 * value: 规定头的值
      20 */
      21 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      22 xhr.send(null)
      23 // 4.接受
      24 /*
      25 * responseText:获得字符串形式的响应数据
      26 * responseXML:获得 XML 形式的响应数据
      27 *
      28 * onreadystatechange:存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
      29 *
      30 * readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变
      31 * 0: 请求未初始化
      32 * 1: 服务器连接已建立
      33 * 2: 请求已接收
      34 * 3: 请求处理中
      35 * 4: 请求已完成,且响应已就绪
      36 *
      37 * status
      38 * 200: "OK"
      39 * 404: 未找到页面
      40 */
      41 xhr.onreadystatechange = function () {
      42 if (xhr.readyState == 4) {
      43 if (xhr.status>=200 && xhr.status<300 || xhr.status == 304) {
      44 alert(xhr.responseText)
      45 }else{
      46 alert('error:'+xhr.status)
      47 }
      48 }
      49 }
      50 }

      原生ajax

  • 优点

    • 用户体验好
    • 性能高
  • 安全

    • 前台没有安全性,后台才有问题(注入)
    • xss——跨站脚本攻击
  • ajax 2.0

    • FormData
    • 文件上传、上传进度监控
    • CORS跨域

四、jsonp

  • 原理

五、websocket