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.接受
    

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

    原生ajax 

• 优点

  • 用户体验好
  • 性能高

• 安全

  • 前台没有安全性，后台才有问题（注入）
  • xss——跨站脚本攻击 

• ajax 2.0

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

四、jsonp

• 原理

五、websocket

转载于:https://www.cnblogs.com/lotosv2010/p/9982629.html