node(三)

最新推荐文章于 2023-12-26 17:04:38 发布

团子爸

最新推荐文章于 2023-12-26 17:04:38 发布

阅读量159

点赞数

分类专栏：前端开发文章标签： node node.js

本文链接：https://blog.csdn.net/wx254418276/article/details/100085695

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

fetch ---- 原生、xhr

1、读取

2、解析

//读取文件

   window.onload = function(){
               let oBtn = document.getElementById('btn1');
               oBtn.onclick = async function(){
                   //请求
                   let res = await fetch('1.txt');
                   //解析
                   let str = await res.text();
                   alert(str);
               }
           }



//读取json

window.onload = function(){
               let oBtn = document.getElementById('btn1');
               oBtn.onclick = async function(){
                   //请求
                   let res = await fetch('1.json');
                   //解析
                   let str = await res.json();
                   console.log(str);
               }
           }

//读取图片

window.onload = function(){
               let oBtn = document.getElementById('btn1');
               let oImg = document.getElementById('img1');
               oBtn.onclick = async function(){
                   //请求
                   let res = await fetch('1.png');
                   //解析
                   let data = await res.blob();
                   let url = URL.createObjectURL(data);
                   oImg.src = url;
               }
           }

jsonp

1、原理

function show({liju_result}){
               console.log(liju_result);
           }

           window.onload = function(){
               let oTxt = document.getElementById('txt1');
               oTxt.oninput = function(){
                   let url = `https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch?wd=${this.value}&cb=show`;
                   let os = document.createElement('script');
                   os.src = url;
                   document.head.appendChild(os);
               }
           }

2、jQuery的用法

$(function(){
               $('#txt1').on('input', function(){
                   $.ajax({
                       url: 'https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch',
                       data: {wd: $(this).val()},
                       dataType: 'jsonp',
                       jsonp: 'cb'
                   }).then(({liju_result})=>{
                       console.log(liju_result);
                   }, res=>{
                       alert('失败');
                   });
               });
           });

Ajax2.0 -> (FormData)

<body>
       <form id="form1" action="http://localhost:8080/aaa" method="post" enctype="multipart/form-data">
           用户：<input type="text" name="username"><br>
           密码：<input type="password" name="password"><br>
           <input type="file" name="f1">
           <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>

//jQuery写法：

$('#form1').on('submit', function(){
           let formdata = new FormData(this);
           $.ajax({
               url: this.action,
               type: this.method,
               data: formdata,
               processData: false,
               contentType: false
           }).then(res=>{
               alert('成功');
           }, res=>{
               alert('失败');
           });
           return false;
       });

<div class="div1">
           用户: <input type="text" id="user" /><br />
           密码: <input type="password" id="pass" /><br />
           文件: <input type="file" id="f1" /><br />
           <input type="button" value="提交" id="btn1" />
       </div>
       <script>
           let oBtn = document.querySelector('#btn1');
           oBtn.onClick = function(){
               let formdata = new FormData();
               formdata.append('username', document.querySelector('#user').value);
               formdata.append('password', document.querySelector('#pass').value);
               formdata.append('f1', document.querySelector('#f1').files[0]);
               //
               let xhr = new XMLHttpRequest();
               xhr.open('POST', 'http://localhost:8080/', true);
               xhr.send(formdata);
               xhr.onreadystatechange=function(){
                   if(xhr.readyState == 4){
                       if(xhr.status == 200){
                           alert('成功');
                       }else{
                           alert('失败');
                       }
                   }
               }
           }
       </script>

webSocket

1、性能高

2、双向通信

socket.io

1、简单、方便

2、兼容ie5

3、自动解析数据

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);
});