Ajax和Axios相关面试题总结-CFANZ编程社区

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客户端（服务器请求服务器不存在跨域）

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