【通信】前端中的几类数据交互方式

//1、创建对象
let xhr = new XMLHttpRequest();
//2、连接
xhr.open('GET','url',true); //true异步，false同步
//3、发送
xhr.send('body数据');
//4、接收
xhr.onreadystatechange = function(){
//onreadystatechange分多次执行
//readyState当前通信状态值：
//1、 0 初始状态：xhr对象刚刚创建完
//2、 1 连接：连接到服务器
//3、 2 发送请求：刚刚Send完
//4、 3 接收完成：头接收完了
//5、 4 接收完成：体接收完了
//status--http状态码，表明通信结果
//1xx 消息
//2xx,304 成功
//3xx  重定向 301 Moved Permanently(永久重定向，下回不会再请求这个服务器) 302-临时重定向（下回依然会请求这个服务器） 304-Not Modified（date 缓存未过期、缓存过期）
//4xx  请求错误，主要错误原因在客户端
//5xx  服务端错误
//6xx+ 自定义
if(xhr.readyState==4){
    if(xhr.status>=200&&xhr.status<300||xhr.status==304){
      //success
      console.log(xhr.response)
      //xhr.response
      //xhr.responseText 以文本方式返回数据
      //xhr.responseURL 
      //xhr.responseXML  以XML方式返回数据
      let arr = eval('('+xhr.responseText+')') //解析方式1,不安全
      let json=null;
      try{
        json = JSON.parse(xhr.respinseText) //解析成json
      }catch(e){
        json = eval('('+xhr.responseText+')') 
      }
    }else {
      //failed
    }
}
}

//FormData 一种容器
//formData.set('name',value)
<input type="button" value="ajax请求" id="btn1">
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            oBtn.onclick= function(){
                var formData = new FormData();
                formData.set('a',12);
                formData.set('b',5);
                var xhr = new XMLHttpRequest();
                xhr.open('post','1.php',false);
                xhr.send(formData);
                xhr.onreadystatechange=function() {
                    if(xhr.readyState==4)
                        if(xhr.status>200&&xhr.status<300||xhr.status==304){
                            alert(xhr.responseText);
                        }else {
                            alert('error')
                        }
                    }
                }
            }
        }
    </script>

//FormData文件上传
//formData.set('name',<input type="file"/>);
//xhr.upload.onload 上传完成
//xhr.upload.onprogress 进度变化
   <input type="file"  id="f1"/>
    <input type="button" value="ajax请求" id="btn1">
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            var oF1 = document.getElementById('f1');
            oBtn.onclick= function(){
                var formData = new FormData();
                formData.set('f1',oF1);
                var xhr = new XMLHttpRequest();
                //进度条
                xhr.upload.onload = function(){
                    console.log('上传完成')
                }
                xhr.upload.onprogress = function(ev){
                    console.log(ev.loaded+'/'+ev.total);
                }
                xhr.open('post','1.php',false);
                xhr.send(formData);
                xhr.onreadystatechange=function() {
                    if(xhr.readyState==4){
                        if(xhr.status>200&&xhr.status<300||xhr.status==304){
                            alert(xhr.responseText);
                        }else {
                            alert('error')
                        }
                    }
                }
            }
        }
    </script>

<input type="file"  id="f1"/>
    <input type="button" value="ajax请求" id="btn1">
    <script>
        window.onload = function() {
            var oBtn = document.getElementById('btn1');
            var oF1 = document.getElementById('f1');
            oBtn.onclick= function(){
                var xhr = new XMLHttpRequest();
                xhr.open('post','http://localhost:8080',true);
                xhr.send();
                xhr.onreadystatechange=function() {
                    if(xhr.readyState==4){
                        alert(xhr.status);
                    }
                }
            }
        }
    </script>

const http = require('http');
let server = http.createServer(function(req,res){
    console.log(req.headers);
    let allowHosts = ['baidu.com','taobao.com','tmall.com']; //加判断，过滤
    if(allowHost.indexOf(req.headers['origin'])!=-1){
        res.setHeader('Access-Control-Allow-Origin','*');  //服务器推一个头Access-Control-Allow-Origin会去
    }
    res.write('123');
    res.end();
})
server.listen(8080);

show({q:"qqvi",p:false,s:["qqvip","qqvip免费","qqvip邮箱","qq录屏","qq表情怎么导入微信表情","qqvip卡通第二天就没了","qq录屏快捷键","qqvip8","qqvip有什么用"]});

//引用了一个外部脚本
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=qqvi&cb=show"></script>
<script>
function show(json){
  alert(json.s);  //s:["qqvip","qqvip免费","qqvip邮箱","qq录屏","qq表情怎么导入微信表情","qqvip卡通第二天就没了","qq录屏快捷键","qqvip8","qqvip有什么用"]
}
</script>

$(function(){
  $.ajax({
    url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    data: {wd:qqvip},
    dataType: 'jsonp',  //设置dataType为jsonp
    jsonp: 'cb',  //告诉JQuery这个回调函数的名字叫cb,名字不固定，你也可以叫callback等等
    success(json){
      alert(json.s);
    },
    error(){
      alert('error');
    }
  })
});

const http = require('http');
const io = require('socket.io');
//1.创建一个http服务
let httpServer = http.createServer();
server.listen();
//2.然后创建一个webSocket 服务
let wsServer = io.listen(httpServer);//监听一个http服务
wsServer.on('connection',function(sock){//连接事件，有连接时，会有一个sock对象
  sock.on('a',function(num1,num2){//接收
      console.log('接到了浏览器发送的数据:${num1} ,${num2}');
  })
}) 

<script src="../socket.io/socket.io.js"></script> //固定引入，实际上引入的是client.js
<script>
let sock = io.connect('ws://localhost:80080'); //前端也需要有一个sock对象，这样前后端都有一个sock对象，可以进行通信，"ws:"标识webSocket协议,告诉浏览器这是一个webSocket通信
document.onclick = function(){
  sock.emit('a',12,5);//取一个名称为“a”，自定义
}
</script>
//反之，服务端也可以进行emit,前端进行on

const http = require('http');
let server= http.createServer((req,res)=>{
  console.log()
  req.headers['accept-language'].split(':')[0].split(',')[0];
  switch(lang.toLowerCase()){
    case 'zh-cn':
      res.setHeader({location:'http://localhost/cn/'})
      res.writeHeader(302);
      break;
    default:
      res.setHeader({location:'http://localhost'})
      res.writeHeader(302);
      break;
  }
})