Nodejs-数据通信

2019-04-01

fetch

fetch 是原生的用来替代 ajax 进行数据交互的。

解析text

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    window.onload=function (){
      let oBtn=document.getElementById('btn1');
      oBtn.onclick=async function (){
        //1.请求数据
        let res=await fetch('data/1.txt');
        //2.解析
        let str=await res.text();

        alert(str);
      };
    };
    </script>
  </head>
  <body>
    <input type="button" value="读取" id="btn1">
  </body>
</html>

解析JSON

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    window.onload=function (){
      let oBtn=document.getElementById('btn1');
      oBtn.onclick=async function (){
        //1.请求
        let res=await fetch('data/1.json');
        //2.解析
        let json=await res.json();

        console.log(json);
      };
    };
    </script>
  </head>
  <body>
    <input type="button" value="读取" id="btn1">
  </body>
</html>

解析二进制数据blob

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    window.onload=function (){
      let oImg=document.getElementById('img1');
      let oBtn=document.getElementById('btn1');
      oBtn.onclick=async function (){
        //1.请求
        let res=await fetch('data/1.png');
        //2.解析
        let data=await res.blob();
        let url=URL.createObjectURL(data);	// 其实这个 url 是把这个图片的二进制数据写到Chrome的临时文件去(小的内存里，大的放文件，后面删)

        oImg.src=url;
      };
    };
    </script>
  </head>
  <body>
    <input type="button" value="读取" id="btn1">
    <img id="img1" />
  </body>
</html>

ajax 2.0

主要是 FormData 对象。(其实就是一个表单数据)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form id="form1" action="http://localhost:8080/" method="post">
      用户：<input type="text" name="user" /><br>
      密码：<input type="password" name="pass" /><br>
      文件：<input type="file" name="f1" /><br>
      <input type="submit" value="提交">
    </form>
  </body>
  <script>
  let oForm=document.querySelector('#form1');

  oForm.onsubmit=function (){
    let formdata=new FormData(oForm);

    let xhr=new XMLHttpRequest();

    xhr.open(oForm.method, oForm.action, true);
    xhr.send(formdata);

    xhr.onreadystatechange=function (){
      if(xhr.readyState==4){
        if(xhr.status==200){
          alert('成功');
        }else{
          alert('失败');
        }
      }
    };

    return false; // 阻止表单自己的提交事件
  };
  </script>
</html>

使用 jQuery 来处理 FormData

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form id="form1" action="http://localhost:8080/" method="post">
      用户：<input type="text" name="user" /><br>
      密码：<input type="password" name="pass" /><br>
      文件：<input type="file" name="f1" /><br>
      <input type="submit" value="提交">
    </form>
  </body>
  <script src="jquery.js" charset="utf-8"></script>
  <script>
  $('#form1').on('submit', function (){
    let formdata=new FormData(this);

    $.ajax({
      url: this.action,
      type: this.method,
      data: formdata,
      processData: false,	// 告诉 jQuery 不要瞎处理我的数据
      contentType: false	// 不要随便改 contentType，我传什么是什么
    }).then(res=>{
      alert('成功');
    }, res=>{
      alert('失败');
    });

    return false; // 阻止表单自己的提交事件
  });
  </script>
</html>

webSocket

性能高、双向。

包：socket.io，简单、方便、兼容 IE5、自动解析数据。

服务器端

const http=require('http');
const io=require('socket.io');

//1.建立普通http
let server=http.createServer((req, res)=>{});
server.listen(8080);

//2.建立ws
let wsServer=io.listen(server);
wsServer.on('connection', sock=>{
  //sock.emit('name', 数据)
  //sock.on('name', function (数据){});

  // 接收前端发过来的数据
  sock.on('aaa', function (a, b){
    console.log(a, b, a+b);
  });

  // 向前端发数据
  setInterval(function (){
    sock.emit('timer', new Date().getTime());
  }, 1000);
});

前端

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://localhost:8080/socket.io/socket.io.js" charset="utf-8"></script>
    <script>
    let sock=io.connect('ws://localhost:8080/');

    sock.emit('aaa', 12, 5);  // 向服务器发数据

    let on = sock.on('timer', time=>{  // 接收服务器发的数据
      console.log(time);
    });

    </script>
  </head>
  <body>

  </body>
</html>