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 = new XMLHttpRequest();
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: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
});
// cancel the request
cancel();
题目答案来源
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);
//通过定义函数名去接收后台返回数据
function jsonpCallback(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/foo
var 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 = new XMLHttpRequest();
//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面试题 | 前端相关推荐
- python后端面试题2020_2020年ajax面试题及答案(最新),python面试题2020
2020年ajax面试题及答案(最新)2020年阿贾克斯面试问答最新,Ajax作为一种创建更好.更快.更具交互性的Web应用的技术,目前越来越受到大家的重视,所以提前掌握ajax面试题知识点有助于求职 ...
- Python Day 67 Dango框架图解(总结)、Wsgiref和uwsgi、前后端传输数据的编码格式、From表单和Ajax方式在前端往后端发送文件、补充一下页面清缓存...
##Django框架图解 ##前后端传输数据的编码格式 #前后端传输数据的编码格式1.urlencoded 2.formdata 3.application/json ##From表单和Ajax方式在 ...
- jQuery中的Ajax(基本语法、Ajax面试题、 layUI的方法级渲染)
1 基本语法 $.ajax({//请求类型get/post method:"post", //指定请求地址 url:"UserServlet", //发送给服务 ...
- 20道经典的AJAX面试题(必知必会)
1.什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么是ajax: AJAX是"Asynchronous JavaScript and XML"的缩写.他是指 ...
- asp.net ajax 怎么获取前端ul li_字节前端提前批面试题:触发了几次回流几次重绘...
一道字节面试题刷新了我的认知,又学到了新知识,开心. 刚开始我说了答案是各3次,因为获取一次offsetWidth一次,然后改变样式一次. 但是后来发现之所以offsetWidth会触发重排是因为刷新 ...
- jQuery与Ajax 面试题库(长期更新中...)
jQuery 部分: JavaScript 是客户端脚本的标准语言,而 jQuery 使得编写 JavaScript 更加简单.你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最长被用到 ...
- ajax 请求_前端后分离Ajax跨域请求保证Session一致
JAVA码牛牛,程序员学习指南 前后端分离的项目,使用Ajax请求一般都出现跨域的问题. 跨域的时候所创建的session是不会被浏览器保存下来的.所以每次进行跨域请求时,服务器都认为不是同一个浏览器 ...
- jeecg中ajax传值的前端js和后台代码
前端js: var b=1; $.ajax({ type : "POST", --Post请求方式 url : 'orderController.do?wuliao', --路径 ...
- 前端的c语言面试题,前端工程师面试题汇总(选择题)
前端工程师面试题汇总(选择题) 时间:2017-12-05 来源:前端工程师面试题推荐 作为一名前端工程师,我们必不可少的就是参加面试,面试过程中会遇到各类奇葩的问题,今天小编为大家汇总了一些 ...
最新文章
- LeetCode题组:第543题-二叉树的直径
- git add -u与-A .三者的区别
- JDBC连接时所犯错误1.字符集设置不合适2.连接MySQL8.0社区版时时区不一致3..包名不能以Java.命名4.驱动被弃用
- 用JS实现根据当前时间随机生成流水号或者订单号
- docker 批量删除容器和镜像
- php基础教程 第九步 自定义函数
- 首先记录异常的根本原因
- php如何查看上传的文件大小,PHP设置最大上传文件大小
- 编写函数digit(num, k),函数功能是:求整数num从右边开始的第k位数字的值,如果num位数不足k位则返回0。...
- 排队接水(信息学奥赛一本通-T1319)
- java 查询windows进程_Oracle查询语句,你知道几个?(下)
- 三星开源的 tcpflow 抓包工具
- EPI_H/EPI_V(边缘保持指数,matlab 矢量化编程)
- jQuery-1.9.1源码分析系列(八) 属性操作
- 关于用户身份及密码问题的说明
- 计算机 怎么挂 两块 硬盘,双硬盘怎么安装?电脑双硬盘安装教程
- 宏病毒专杀软件测试大乐,好用的宏病毒查杀软件有哪些
- Simulink建模:LKA系统功能状态机建模
- Ue4导入视频黑屏原因
- Java技术--单点登录统一认证系统的实现
热门文章
- js控制台打印对象时,属性显示有值,进一步打印属性为空
- 91.91p06xcm71xyz./index.php?,http://email.91dizhi.at.gmail.com.e9p.work/php
- 基于SSM+MySQL+JSP+Shiro的快递物流信息管理系统
- 2020风中劲草考研政治大纲资料【超清PDF】
- Checkbox 样式
- vue 文件上传组件封装
- Geant4------初学3
- js全角半角空格记录
- MATLAB绘制实指数信号
- 清华计算机考研csp,「考研2021」400分跨考清华大学软件学院经验帖