0


Ajax面试题 | 前端

本文的Ajax面试题主要来源于网上的文章和课程,会有出处注明。
本文主要作为自用备忘。
Ajax知识点笔记


一、什么是Ajax

1.Ajax的概念

Ajax是异步的javascript和xml
Ajax是一种用于创建快速动态网页的技术

2.Ajax的作用、优缺点

作用:ajax用来与后台交互

优点

  • 最大的优点就是页面无需刷新,在页面内与服务器通信,非常好的用户体验。
  • 使用异步的方式与服务器通信,不需要中断操作。
  • 可以把以前服务器负担的工作转嫁给客户端,减轻服务器和带宽,可以最大程度减少冗余请求。
  • 基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

缺点

  • Ajax干掉了Back和History功能,即对浏览器机制的破坏。 无法使用浏览器前进后退。
  • 安全问题:跨站脚本攻击、SQL注入攻击等。
  • 对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。

题目答案来源

3.Ajax有几种请求方式?它们的优缺点?

常用的post,get,delete。不常用copy、head、link等等。

a.代码上的区别
(1)get通过url传递参数
(2)post设置请求头 规定请求数据类型

b.使用上的区别
(1)post比get安全
(因为post参数在请求体中。get参数在url上面)
(2)get传输速度比post快 根据传参决定的。
(post通过请求体传参,后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
(3)post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
(4)get获取数据 post上传数据
(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)
题目答案来源

4.json字符串转换集json对象、json对象转换json字符串

//字符串转对象JSON.parse(json)eval('('+ jsonstr +')')// 对象转字符串JSON.stringify(json)

题目答案来源

5.ajax请求如何取消

(1)原生xhr取消请求

var xhr =newXMLHttpRequest();
xhr.abort();

(2)axios取消请求
(i)使用 CancelToken.source 工厂方法创建 cancel token

const CancelToken = axios.CancelToken;const source = CancelToken.source();
axios.get('/user/123',{cancelToken: source.token
}).catch(function(thrown){if(axios.isCancel(thrown)){
        console.log('Request canceled', thrown.message);}else{// 处理错误}});
​
axios.post('/user/123',{name:'小明'},{cancelToken: source.token
})
​
// 取消请求(message 参数是可选的)
source.cancel('canceled by the user.');

(ii)传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token

const CancelToken = axios.CancelToken;let cancel;
​
axios.get('/user/12345',{cancelToken:newCancelToken(functionexecutor(c){// executor 函数接收一个 cancel 函数作为参数
    cancel = c;})});
​
// cancel the requestcancel();

题目答案来源

6.取消ajax请求有什么意义

已发出的请求可能仍然会到达后端
(1)取消后续的回调处理,避免多余的回调处理,以及特殊情况,先(2)发出的后返回,导致回调中的数据错误覆盖
(3)取消loading效果,以及该请求的其他交互效果,特别是在单页应用中,A页面跳转到B页面之后,A页面的请求应该取消,否则回调中的一些处理可能影响B页面
(4)超时处理,错误处理等都省去了,节约资源

题目答案来源


二、跨域

1.什么情况会造成跨域?

同源策略是浏览器的一种安全策略。
同源:协议、域名、端口号 必须完全相同
违背同源策略就是跨域。

2.跨域解决方案有哪些?

(1)JSONP
a.是什么
JSONP(JSON with Padding),是一个非官方的跨域解决方案,只支持get请求
b.原理
动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。

c.步骤

  • 去创建一个script标签
  • script的src属性设置接口地址
  • 接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
  • 通过定义函数名去接收后台返回数据
//去创建一个script标签var  script = document.createElement("script");//script的src属性设置接口地址 并带一个callback回调函数名称
script.src ="http://127.0.0.1:8888/index.php?callback=jsonpCallback";//插入到页面
document.head.appendChild(script);//通过定义函数名去接收后台返回数据functionjsonpCallback(data){//注意  jsonp返回的数据是json对象可以直接使用//ajax  取得数据是json字符串需要转换成json对象才可以使用。}

(2)CORS
a.是什么
CORS(Cross-Origin Resource Sharing),跨域资源共享,CORS是官方的跨域解决方案。
特点:
不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求,跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
b.原理
服务器设置Access-Control-Allow-OriginHTTP响应头之后,浏览器将会允许跨域请求

c.步骤

//需要后台设置
Access-Control-Allow-Origin:*//允许所有域名访问,或者
Access-Control-Allow-Origin: http://a.com   //只允许所有域名访问

补充:
(3)设置 document.domain
a.原理
相同主域名不同子域名下的页面,可以设置document.domain让它们同域
b.限制
同域document提供的是页面间的互操作,需要载入iframe页面
c.步骤

// URL http://a.com/foovar ifr = document.createElement('iframe');
ifr.src ='http://b.a.com/bar'; 
ifr.onload=function(){var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);};

ifr.style.display ='none';
document.body.appendChild(ifr);

(4)用Apache做转发(逆向代理),让跨域变成同域

题目答案来源


三、对比题

1.Ajax、Fetch、Axios三者的区别?

  • ajax是js异步技术的术语,早起相关的api是xhr,它是一个术语
  • fetch是es6新增的用于网络请求标准api,它是一个api
  • axios是用于网络请求的第三方库,它是一个库

题目答案来源


四、手写题

1.手写Ajax原始请求

//1.创建 XMLHttpRequest 对象var xhr =newXMLHttpRequest();//2.规定请求的类型、URL 以及是否异步处理请求。
xhr.open('GET',url,true);//3.发送信息至服务器时内容编码类型//设置响应头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//4.发送请求
xhr.send(null);//5.接受服务器响应数据
xhr.onreadystatechange=function(){if(xhr.readyState ===4){//判断响应状态码  200 404 403 401 500//2xx 成功if(xhr.status >=200&& xhr.status <300){}else{}}}

题目答案来源链接

标签: ajax 前端 javascript

本文转载自: https://blog.csdn.net/qq_42376600/article/details/128064436
版权归原作者 风筝风 所有, 如有侵权,请联系我们删除。

“Ajax面试题 | 前端”的评论:

还没有评论