前端学习之ajax

程序媛刘刘

已于 2023-01-10 15:53:45 修改

阅读量420

点赞数

分类专栏：前端学习文章标签：前端 ajax 学习

于 2022-07-20 08:15:00 首次发布

本文链接：https://blog.csdn.net/weixin_53105591/article/details/125782555

版权

前端学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

含义：

Asynchronous javascript and XML 异步的js和XML（前后台交互）

AJAX只是js中的一个AOI

同步：代码逐行执行，下面一行等待上面一行执行完在执行

异步：代码一起执行

XML：

含义：数据交换的格式

数据交换格式：

含义：客户端和服务端交互时要有一个共同的格式

分类：XML（几乎不用）

JSON（重点）

方法：JSON.parse() 将json字符串转为对象

JSON.stringify() 将对象转json字符串

发送请求：

    1 创建AJAX对象
     let xhr=new XMLHttpRequest();
    2 配置（创建--借助koa框架和打开服务器）
    xhr.open(请求方式,路径,true/false)
    true/false  异步（默认）/同步
    3 发送请求
      xhr.send()
    4 接收请求的结果（服务器回应）
    xhr.onload=function(){
        打印接收的结果
       封装到xhr.responseText属性中
     console.log(xhr.responseText);
      }
   注意:请求的后面可以加参数 
        get请求：可以在路径后面写，用?拼接参数
        post请求：不建议写在路径后面，容易信息泄露
                  建议写在send()里面
         
  // get请求
    // 1 创建AJAX对象
     let xhr=new XMLHttpRequest();
    // 2 配置（创建--借助koa框架和打开服务器）
     xhr.open('GET','/ajax?username=lll&&age=18')
    // 3 发送请求
    xhr.send()
    // 4 接收请求的结果（服务器回应）
     xhr.onload= function(){
         console.log(xhr.responseText);
     }
// post请求：
     // 1 创建AJAX对象
     let xhr1=new XMLHttpRequest();
    // 2 配置（创建--借助koa框架和打开服务器）
     xhr1.open('POST','/ajax01')
    //  修改content-type
    // xhr1.setRequestHeader('Content-type','12465454');
    // 3 发送请求
    xhr1.send('username=kkk&&age=20');
    // 4 接收请求的结果（服务器回应）
     xhr1.onload= function(){
         console.log(xhr1.responseText);
     }

FormData对象：

onloadstart   上传开始
onprogress    数据传输进行中
   evt.total  需要传输的总大小
   evt.loaded 当时上传的文件大小
onabsort       上传操作终止
onerror        上传失败
onload         上传成功
onloadend      上传完成（不管是否上传成功）
使用：
  1 创建formdata对象
    let formdata=new FormData();
  2 往formdata里面添加文件信息（图片信息属性名，文件信息value名）
    formdata.append('lll',files)

// 获取元素
 let input=document.querySelector('input');
 let btn=document.querySelector('button');
 btn.onclick=function(){
    // 获取文件的基本信息
      let file=input.files[0];
    // 创建formdata对象
    let formdata=new FormData();
    // 往formdata里面添加文件信息
    formdata.append('lll',file)
    //创建AJAX对象
    let xhr=new XMLHttpRequest();
    // 配置xhr
    xhr.open('POST','/ajax02');
    // 发送请求，把formdata对象传入服务器
    xhr.send(formdata)
    // 接收请求(服务器响应)
    xhr.onload=function(){
        console.log(xhr.responseText);
    }
 }

跨域问题：

含义：不同源之间的请求
浏览器出于安全考虑有一个同源策略：只有在同一个源中才能相互请求
同源：同一协议，同一个域名，同一个端口

解决：

jsonp方法:

img和script标签的src属性，link和a标签的href属性，不受跨域限制
解决的原理：利用script标签中的src属性不受跨域限制
缺点： 1 只能支持get请求
       2 不太安全

// 封装到函数中，方便调用
function addScript(){
    // 创建script标签
let script=document.createElement('script');
 // jsonp方法：
// 添加src属性:'添加请求的接口'
script.src='http://localhost:4000/indexl?callback=fn';
//将script添加到html的页面中
document.body.append(script)
}

document.querySelector('button').onclick=addScript;

cors方法：

  解决的原理:设置头文件
  允许跨域，表示所有的源都可以访问我的接口，不安全
  有一个中间件:
        npm i koa-cors 暴露所有接口
   ctx.set('Access-Control-Allow-Origin','*/请求网址')

proxy方法:

 解决的原理:代理请求,借助一个中间件koa-serve-http-proxy
 使用: 
 1 引入
  let proxy=require('koa-server-http-proxy');
 2 使用
  app.use(proxy('/api',{
      target:'http://localhost:4000',
      pathRewrite:{'^/api':''},     要与上面的api保持一致
      changeOrigin:true
  }))
    xhr.open('GET','api/aa')
  请求接口前的api表示需要转发
  请求接口前无api表示正常请求

//使用proxy方法解决跨域问题:
let proxy=require('koa-server-http-proxy');
// 使用proxy:
app.use(proxy('/api',{
    target:'http://localhost:4000',
    pathRewrite:{'^/api':''},
    changeOrigin:true
}))

json web token（令牌）权限校验：

含义:

为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准
JET的声明一般被用来在身份提供者和服务提供者传递被认证的用户身份信息，
以便于从资源服务器获取资源
原理：
1 第一次请求服务器时使用用户名和密码登录
2 当用户名密码匹配成功时，服务器生成token并返回给客户端
3 客户端把获取的token存放起来，方便调用例如：cookie,webstorage
4 当第二次及以后再访问该服务器时，使用token登录即可，无需再次登录

使用：

生成和返回token：jsonwebtoken中间件
  1 需要require引入
  2  jwt.sign({自定义信息}，‘密钥’，失效时间{expiresIn:'时间'})  生成token
      token组成：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjAwMDAiLCJ1c2VybmFtZSI6ImFkbWluIiwicGFzc3dvcmQiOiIxMjMiLCJpYXQiOjE2MzU1MDEzOTd9.sja2sXE5xGT_XZBzOefJwphk39dbtkeIqECj6o1DBAI
         1 header 头部信息
          {
              type：'JWT',  // 类型
              alg:'HS256'   //加密方法
          }
          2 payload 预定义信息及自定义信息
              如果需要存储密码等重要信息记得加密
                {
                "id": "0000",
                "username": "admin",
                "password": "123",
                "iat": 1635501397  //签发时间
                "exp": 1635503132  //失效时间
                }
          3 签名（密钥）
       jwt。io是jwt的官网
加密：md5中间件
   一层加密容易被解开要做好多层加密
权限验证: koa-jwt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1 第一次请求服务器时使用用户名和密码登录
            2 当用户名密码匹配成功时，服务器生成token并返回给客户端
            3  客户端把获取的token存放起来，方便调用 例如：cookie,webstorage
            4 当第二次及以后再访问该服务器时，使用token登录即可，无需再次登录
     -->
    <button class="login">登录</button>
    <button id="login1">再次登录</button>
    <script>
        let btn=document.querySelectorAll('.login')
        console.log(btn);
        btn[0].onclick=function(){
            //AJAX:
            let xhr=new XMLHttpRequest();
            xhr.open('GET','/aa?username=admin&password=123');
            xhr.send()
            xhr.onload=function(){
                // 获取的是json文件
                console.log(JSON.parse(xhr.responseText));
                let {msg,token}=JSON.parse(xhr.responseText)
                localStorage.setItem('lld',token)
            }
        }
        document.querySelector('#login1').onclick=function(){
            // AJAX:
            console.log('aa');
            let xhr=new XMLHttpRequest();
            xhr.open('GET','/data');
            xhr.send();
            // 有token就有权限访问
            // 请求头设置传入token让他有权限进行访问：
            let token=localStorage.getItem('lld')
            xhr.setRequestHeader('Authorization' `Bearer ${token}`)
            xhr.onload=function(){
                let {msg}=JSON.parse(xhr.responseText)
               alert(msg)
            }
        }
    </script>
</body>
</html>

客户端存储方式：

cookie:

特征：

浏览器和服务器间来回传递
过期时间
自己封装setCookie
与服务器交互

设置：

document.cookie   关闭页面后会消失
封装cookie：
function setCookie(cname,cvalue,exdays){   //cookie的名字，值，过期时间（天）
    var d=new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));//现在的时间戳+未来的时间戳
    var expires='expires'+d.toGMTString();        //转换为日期格式
    document.cookie= cname + '=' + cvalue + ';' + expires;
}

获取：

console.log( document.cookie )
//封装cookie:
    function getCookie(cname){
       var name=cname + '=';
       var ca=document.cookie.split(';');
       for(var i=0;i<ca.length;i++){
         var c=ca[i].tirm();
         if(c.indexOf(name)==0) return c.substring(name.length,c.length);
       }
       return '';
    }

webStorage:

特征：

不会把数据发送到服务器
local永久保存，session页面关闭
现成的setItem
在本地存储数据

设置：

 //localstorage:本地存储
 localStorage.setItem(name.value)
 localStorage.getItem(token)
 localStorage.removeItem(name.value)
 localStorage.clear(name.value)

 //sessionStorage:临时存储
 sessionStorage.setItem(name.value)
 sessionStorage.getItem(name.value)
 sessionStorage.removeItem(name.value)
 sessionStorage.clear(name.value)

axios:

作用：封装
使用：
引入 :
npm i axios
cdn（网址版）

 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
     console.log('发送请求中');
                                      // config.params.id='ID:::'+ config.params.id
 // 获取token
 let token=localStorage.getItem('tk') || ' '
 console.log(token);
 // 把token添加到拦截器中，减少多次编写
  if(token){
     config.headers.Authorization='Bearer '+token
  }
     return config;
   }, function (error) {
     // 对请求错误做些什么
     return Promise.reject(error);
   })
  // 添加响应拦截器(相应回来之前做的事情)
 axios.interceptors.response.use(function (response) {
     // 对响应数据做点什么
     console.log(response);
     return response;
   }, function (error) {
     // 对响应错误做点什么
     return Promise.reject(error);
   });


 document.querySelector('.btn1').onclick=function(){
     // 基础用法：
     // axios.get('/lll').then(res=>console.log(res))
     // 传参方式一
     // axios.get('/lll?username=yyl').then(res=>console.log(res));
     // 传参方式二
     axios.get('/lll',{
         params:{
             username:'yyl',
             age:20,
             id:'0000'
         }
     }
     ).then(res=>{
         console.log(res.data);
         //保存token：
        localStorage.setItem('tk',res.data.token)
     }).catch(function(err){
          console.log(err);   //错误处理
     })
     
 }
 document.querySelector('.btn2').onclick=function(){
    axios.get('/mmm').then(res=>console.log(res));
}
 document.querySelector('.btn3').onclick=function(){
     axios.get('/fff').then(res=>console.log(res));
 
 }

async await :异步的终极解决方案

目的：将异步的写法，写起来更像同步
作用:处理异步问题
解决juepromise对象问题：
当promise中的异步操作过多时，也会产生一种回调地狱
async函数：
会自动的将返回值包裹为promise对象
await函数：
异步的函数需要使用await来接收其处理的结果
await的外层函数必须是async函数

function getCode(){
   return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       resolve('code')
     },1000);
   })
 }
 function getToken(code){
   return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       resolve(code+'token')
     },1000);
   })
 }
 function getOpenid(token){
   return new Promise((resolve,reject)=>{
     setTimeout(()=>{
       resolve(token+'oprnid')
     },1000);
   })
 }
async function getdata(){
   let code=await getCode()
   let token=await getToken(code)
   let openid=await getOpenid(token)
   console.log(code,token,openid);
        }
etdata()

jq的ajax:

优势：
1 简单
2 传参方便
3 将请求的json结果自动转为对象
4 jsonp跨域问题
作用：解决原生ajax代码太过于繁琐的问题

使用：

引入jq

// 原生ajax:
let btn=document.querySelectorAll('.btn');
btn[0].onclick=function(){   
  let xhr=new XMLHttpRequest(); 
  xhr.open('GET','/lll?name=yyl') 
  xhr.send()
  xhr.onload= function(){
  console.log(xhr.responseText);
 }
}
//jq的ajax 
$('.btn1').click(function(){
    $.get('/lll','参数',function(res){
       console.log(res);
    })
})
  console.log($);
  $('.btn2').click(function(){
   $.ajax({
       type:'get',
       url:'http://127.0.0.1:3000/mmm',
       data:{
           username:'yyl',
           age:20,
       },
       // 跨域问题  
       dataType: 'jsonp',
      // 成功函数   
       success:function(res){
           console.log(res);
       },
      //失败函数   
       error:function(){
        console.log('出现错误了');
       },
        // 完成函数   
       complete:function(){
           console.log('请求完毕');
       }
   })
})
  console.log($);
// // 跨域问题    声明函数：
function fn(res){
    console.log(res);
}