【Nao机器人】Robocup场地信息

<!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>

展开全文 >>

Nodejs-ajax跨域

2019-03-31

const http=require('http');

let allowOrigin={
  'http://localhost': true,
  'http://aaa.com': true,
  'https://aaa.com': true,
}

http.createServer((req, res)=>{
  let {origin}=req.headers;

  if(allowOrigin[origin]){
    res.setHeader('access-control-allow-origin', '*');
  }

  res.write('{"a": 12, "b": "Blue"}');
  res.end();
}).listen(8080);

<!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=function (){
        let ajax=new XMLHttpRequest();

        ajax.open('GET', 'http://localhost:8080/a', true);
        ajax.send();

        ajax.onreadystatechange=function (){
          // readyState 0~4
          // 0：初始化	1：已连接 2：已发送 3：响应头已经接收到 4：相应体已经接受
          if(ajax.readyState==4){
            if(ajax.status>=200 && ajax.status<300 || ajax.status==304){
              alert('成功');
              let json=JSON.parse(ajax.responseText);
              console.log(json);
            }else{
              alert('失败');
            }
          }
        };
      };
    };
    </script>
  </head>
  <body>
    <input type="button" value="请求" id="btn1">
  </body>
</html>

ajax为什么不能跨域？

SOP：同源策略，你代码请求的资源应该和你在一个域名下，如果不是，浏览器会禁止这个请求。

ajax是被谁阻止住的？

不是服务器，是浏览器阻止的，这是浏览器的一种”自律”的行为。

服务器是一定会响应的，响应后如果不是同源，浏览器会把这个东西扔掉。

所以这个时候需要服务器返回数据的时候需要声明一下，声明我们是一家子(就是声明哪些人可以从我这里获取数据)，如上代码。

展开全文 >>

Nodejs-几个系统包

2019-03-31

assert

assert(5<3, 'aaa');

assert.deepEqual(变量, 预期值, msg); // 深度比较，相当于 ==
assert.deepStrictEqual(变量, 预期值, msg);	// 相当于 === (比较类型)

path

const path=require('path');

let str='/root/a/b/1.txt';

console.log(path.dirname(str));	// 文件夹名 /root/a/b
console.log(path.extname(str));	// 扩展名 .txt
console.log(path.basename(str));	// 文件名 1.txt

console.log(path.resolve('/root/a/b', '../c', 'build', '..', 'strict'));
console.log(path.resolve(__dirname, 'build'));
// __dirname 类似于C中的宏，是当前路径

url

const url=require('url');

let str='http://www.bing.com:8080/a/b/1.html?a=1&a=2&a=3';
console.log(url.parse(str, true));	// true表示解析后面的参数(query)，解析成 JSON，不加true就是一个字符串

querystring

const querystring=require('querystring');

console.log(querystring.parse("a=12&b=5&c=99"));
console.log(querystring.stringify({a: 12, b: 99, c: 'blue'}));

net

网络通信。

OSI七层参考模型
物理层 > 数据链路层 > 网络层(IP) > 传输层(TCP) > 会话层 > 表现层 > 应用层(HTTP)

5层模型
物理层 > 数据链路层 > 网络层(IP) > 传输层(TCP) > 应用层(HTTP)

net就是传输层(TCP)的一个包，可以保证质量。

TCP：保证质量，特别适合网络传输文件，不能丢数据。

UDP：保证速度，特别适合网络视频直播等，丢一两帧问题不大。

展开全文 >>