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

数据交互

一、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