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





posted @ 2017-11-10 13:25  lotosv2010  阅读(154)  评论(0)  编辑  收藏  举报