fetch，ajax，websoket

fetch--原生

用fetch需要两步，第一步请求，第二步解析。

async function(){ 
    let res = await fetch('data/1.json'); 
    let json = await res.json(); 
}

jsonp

本身是通过script来实现了跨域，但是不能阻止别人调用自己这个方法。不安全。

ajax2.0(formdata)

<form id="form1" action="请求网址" method="post/get"> 
    用户：<input type="text" name="user" /> 
    密码：<input type="password" name="pass" /> 
    <input type="submit" value="提交"> 
</form> 

form1.onsubmit = function(){ 
    let formdata = new FormData(form1) 
    let shr = new XMLHttpRequest() 
    shr.open(form1.method, forrm1.action, true); 
    shr.send(formdata); 
    return false; // 组织form表单本身的提交 
}

webSocket

性能高，双向传输；初次建立连接时是文本传输，一旦连接成功之后的传输就为二进制，所以性能高。

socket.io 方便，兼容ie5，自动数据解析，断开会自动进行重连，并且会对正确的数据进行缓存，连接后自动发送。

// 前端 
<script src="http://localhost:8080/socket.io/socket.io.js"></script> 
<script> 
    let sock = io.connect('ws://localhost:8080/'); 
    // websocket自带跨域 
    // sock.on sock.emit 
    // 向发服务器发送数据 
    sock.emit('aaa', 12,5); 
    // 接收服务器传输过来的数据 
    sock.on('timer', time=>{ console.log(time) }) 
</script>

不是独立的服务，在连接建立初期还需要http帮助它传输一些信息。

// 服务端 
const http = require('http') 
const io = require('socket.io') 
// 第一步 建立普通服务 
let server = http.createServer((req,res)=>{}) 
server.listen(8080) 
// 第二步 建立webSocket服务 
let wsServer = io.listen(server); 
// 监控，如果有请求时找server，那么就会把连接抢过来 
wsServer.on('connection', sock=>{ 
    // sock.emit('name', 数据) 发送数据 
    // sock.on('name', function(数据){}) 接收数据 
    sock.on('aaa', function(a,b){ 
        console.log(a,b,a+b) 
    }) 
    // 服务器主动发数据 
    sock.emit('timer', new Date().getTime()) 
})

webSocket天然安全

原生websocket

客户端跟服务器进行握手，客户端向服务器请求连接，服务器会返回给客户端可以，客户端向服务器发送请求信息。

// ws服务发送请求时，请求头中会比http多几个属性 
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits 
Sec-WebSocket-Key: TLiEzlDxbzL6XvLF27l2wg== // 认证的key，为了校验对方是否是ws服务器 
Sec-WebSocket-Version: 13 // webSocket版本 
Upgrade: websocket // 协议升级