Ajax和Axios相关面试题总结

Ajax和Axios相关面试题总结Ajax和Axios作用:发送的就是http请求,请求相应数据实现懒加载:需要的时候再出现,不需要则不出现1.同步请求和异步请求同步:提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事异步:请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕2.fetch、axios、jquery的ajax用法都是用来进行http的请求关系图:Xhr(代码复杂rang)->jquery封装的$ajax->fet

Ajax和Axios

AJAX:客户端可以’敲敲的’向服务器端发请求,在页面没有刷新的情况下,实现页面的局部更新
作用:发送的就是http请求,请求相应数据

Axios :是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。

1.同步请求和异步请求

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

2.fetch、axios、jquery的ajax用法

都是用来进行http的请求

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

小扩展
JSONg格式是什么?

  • 是一种文件传输的格式
  • 多个键值对的形式
  • 获取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))

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

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

什么是同源策略?

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

怎么解决跨域?
常用三种

  • 1.jsonp
    原理是通过href或者src请求下来的js脚本或者CSS文件视频图片都是不存在跨域问题,只要AJAX请求数据才存在跨域问题,但是Jsonp有瑕疵只能请求get
    原理是通过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('你好')
  • 2.cors请求set
    CORS:一个W3C标准,它同时需要浏览器和服务端的支持,浏览器基本都支持,因此,想要实现CORS通信,只要服务器实现了CORS接口即可
    作用原理:它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin(domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。而CORS 允许浏览器向跨源服务器,发出跨域请求,从而克服了A在这里插入图片描述
  • 3.代理转发
    • 后端设置代理和允许跨域请求
  • vue-cli 配置请求代理

什么是代理?

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

4.Ajax 解决浏览器缓存问题

  • 在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。
  • 在 ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。
  • 在 URL 后面加上一个随机数: “fresh=” + Math.random()。
  • 在 URL 后面加上时间搓: “nowtime=” + new Date().getTime()。

5.ajax 返回的状态

0 - (未初始化)还没有调用 send()方法
1 - (载入)已调用 send()方法,正在发送请求
2 - (载入完成) send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了

6.实现一个 Ajax

AJAX 创建异步对象 XMLHttpRequest操作 XMLHttpRequest 对象
(1)设置请求参数(请求方式,请求页面的相对路径,是否异步)
(2)设置回调函数,一个处理服务器响应的函数,使用 onreadystatechange ,类似函数
指针
(3)获取异步对象的 readyState 属性:该属性存有服务器响应的状态信息。每当
readyState 改变时, onreadystatechange 函数就会被执行。
(4)判断响应报文的状态,若为 200 说明服务器正常运行并返回响应数据。
(5)读取响应数据,可以通过 responseText 属性来取回由服务器返回的数据。

7.如何实现 ajax 请求,假如我有多个请求,我需要让这些 ajax 请求按照某种顺序一次执行,有什么办法呢

使 ajax 请求按照队列顺序执行,通过调用递归函数:
//按顺序执行多个 ajax 命令,因为数量不定,所以采用递归

function send(action, arg2) { 
   

想要获取更多前端开发相关学习资料,请加微信1124692领取>>>>>>
//将多个命令按顺序封装成数组对象,递归执行
//利用了 deferred 对象控制回调函数的特点
$.when(send_action(action[0], arg2))
.done(function () { 
   
//前一个 ajax 回调函数完毕之后判断队列长度
if (action.length > 1) { 
   
//队列长度大于 1,则弹出第一个,继续递归执行该队列
action.shift();
send(action, arg2);
}
}).fail(function (){ 
   
//队列中元素请求失败后的逻辑
//
//重试发送
//send(action, arg2);
//
//忽略错误进行下个
//if (action.length > 1) { 
   
//队列长度大于 1,则弹出第一个,继续递归执行该队列
// action.shift();
// send(action, arg2);
//}
});
}
//处理每个命令的 ajax 请求以及回调函数
function send_action(command, arg2) { 
   
var dtd = $.Deferred();//定义 deferred 对象
$.post( "url", { 
   
command: command, 
想要获取更多前端开发相关学习资料,请加微信1124692领取>>>>>>
arg2: arg2
}
).done(function (json) { 
   
json = $.parseJSON(json);
//每次请求回调函数的处理逻辑
//
//
//
//逻辑结束
dtd.resolve();
}).fail(function (){ 
   
//ajax 请求失败的逻辑
dtd.reject();
});
return dtd.promise();//返回 Deferred 对象的 promise,防止在外部

8.手写出原生 Ajax

var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() { 
   
if(xhr.readyState==4) { 
   
if(xhr.status==200) { 
   
console.log(xhr.responseText);
}
}
} 

9.Fetch 和 Ajax 比有什么优缺点?

promise 方便异步,在不想用 jQuery 的情况下,相比原生的 ajax,也比较好写。

小编目前就整理了这些,后续会陆续更新啦~大家可以一起学习总结
在这里插入图片描述

今天的文章Ajax和Axios相关面试题总结分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/11494.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注