0
点赞
收藏
分享

微信扫一扫

Ajax和Axios相关面试题总结

贵州谢高低 2022-04-13 阅读 52
ajax

Ajax和Axios

作用:发送的就是http请求,请求相应数据

实现懒加载:需要的时候再出现,不需要则不出现

1.同步请求和异步请求

  • 同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
  • 异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕

2.fetch、axios、jquery的ajax用法

都是用来进行http的请求

关系图:
Xhr(代码复杂rang) -> jquery封装的$ajax ->fetch(全新的技术) axios(封装ajax Xhr)

小扩展

JSONg格式是什么?

  • 是一种文件传输的格式
  • 多个键值对的形式
{
    "key":"value"
}
  • 获取JSON对象obj里面的属性a的方式
  • obj.a
  • obj[‘a’] (数组方法)

jquery封装的$ajax

请求的格式默认是表单格式

    $.ajax({
    //扩展方法,设置请求方法
    methods:"POST"
    //请求的参数  (1.post默认表单格式的提交,2.get:queryString)
    //3.json格式请求
    header:{'Content-type':'application/json'}
    //请求参数
    data:JSON.stringfy({a:10})
    //请求地址
    url(http://localhost:99),
    //拿到调用的数据
    success:function(data){
    conssole.log(data)
    }
    })
    

fetch

现在浏览器自带,不用下载任何的js包

    //返回的是promise
    fetch("http:/localhost:99?b=2"{
   //加入指定参数
   method:"POST"
   //以表单的形式提交
   //也可以JSON方式提交
   header:{"content-type":"application/x-www-form-urlencoded"}
   //请求参数
   body:"a=12&b=33"
   }).then(response=>response.json()).then(data=>console.log(data)

axios

不仅可以再前端进行http的请求,也可以在后端进行http的请求
请求的格式默认是JSON格式

    axios({
    url:"http://localhost:99?b=2",
    method:"POST",
    //支持表单的格式提交
     header:{"content-type":"application/x-www-form-urlencoded"}
     data:"a=123&b=156"
     data:{a:12} 
    //then方法 拿到调用的数据
    }).then(res=>console.log(res.data))

axios和fetch区别对比

axios和fetch区别对比

3.JS跨域资源共享(CORS问题)

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。

什么是同源策略?

  • 是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现,通俗来说请求必须三个要素相同,(协议、域名、端口) 都相同,

怎么解决跨域?
常用的解决跨域问题:
一共有七种
常用三种
1.jsonp2.cors请求set3.代理转发

  • 常规ajax 请求 设置—代理
  • 后端设置代理和允许跨域请求
*任意的域都可以进行跨域
reponse.header("Access-Control-Allow-Origin","*")
    2.Jsonp
    原理是通过href或者src请求下来的js脚本或者CSS文件视频图片都是不存在跨域问题,只要AJAX请求数据才存在跨域问题,但是Jsonp有瑕疵只能请求get
    前端:
    function f(data){
    alter(data)
    }
    <script src="请求地址URL?callback=f"></script>
    
    后端:
    var funcname = request.query.callback
    response.send(funcname+"('你好')"
    //f('你好')
  • vue-cli 配置请求代理

什么是代理?

  • 常规 :A客户端向 B服务器请求
  • 变成: 代理服务器C收的A的请求 C服务器请求B服务器 返回给A客户端 (服务器请求服务器不存在跨域)

小编目前就整理了这些,后续会陆续更新啦~大家可以一起学习总结

举报

相关推荐

0 条评论