【前端领域高频笔试面试】—— Ajax相关

简介: 【前端领域高频笔试面试】—— Ajax相关

1.Ajax 是什么? 如何创建一个Ajax?

       Ajax并不算是一种新的技术,全称是asychronous javascript and xml,可以说是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果。


<script>
  //基本步骤:
  var xhr = null; //创建对象
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open("方式", "地址", "标志位"); //初始化请求
  xhr.setRequestHeader("", ""); //设置http头信息
  xhr.onreadystatechange = function () {} //指定回调函数
  xhr.send(); //发送请求
</script>

2.同步和异步的区别

       同步:阻塞的浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面;


       异步:非阻塞的浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新。


3.如何解决跨域问题?

       理解跨域的概念:协议、域名、端口号都相同才同域,否则都是跨域。


       出于安全考虑,服务器不允许ajax跨域获取数据,但是可以跨域获取文件内容,所以基于这一点,可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,这就是解决跨域问题的主流解决方案。


4.页面编码和被请求的资源编码如果不一致如何处理?

       对于ajax请求传递的参数,get请求方式参数如果传递中文,在有些浏览器会乱码,不同的浏览器对参数编码的处理方式不同,所以对于get请求的参数需要使用 encodeURIComponent函数对参数进行编码处理,后台开发语言都有相应的解码api;对于post请求则不需要进行编码。


5.简述ajax 的过程

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象;

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息;

(3)设置响应HTTP请求状态变化的函数;

(4)发送HTTP请求;

(5)获取异步调用返回的数据;

(6)使用JavaScript和DOM实现局部刷新。


6.阐述一下异步加载

(1)异步加载的方案:动态插入script标签;

(2)通过ajax去获取js代码,然后通过eval执行;

(3)script标签上添加defer 或者async属性;

(4)创建并插入iframe,让它异步执行js。


7.请解释一下JavaScript的同源策略

       同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载;所谓同源指的是协议、域名、端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。


8.GET和POST的区别,何时使用POST?

       GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符,有的浏览器是8000个字符。


       POST:一般用于修改服务器上的资源,对所发送的信息没有限制。


在以下情况中,需要使用 POST 请求:

(1)无法使用缓存文件(更新服务器上的文件或数据库);

(2)向服务器发送大量数据(POST 没有数据量限制);

(3)发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。


9.什么是Ajax和JSON,它们的优缺点

       Ajax是全称是asynchronous JavaScript andXML,即异步JavaScript和xml,用于在Web页面中实现异步数据交互,实现页面局部刷新。

       优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验

       缺点:对搜索引擎不友好;要实现ajax下的前后退功能成本较大;可能造成请求数的增加跨域问题限制;


       JSON是一种轻量级的数据交换格式,ECMA的一个子集;优点是轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)。


10.http常见的状态码有那些?分别代表是什么意思?

200 - 请求成功;

301 - 资源(网页等)被永久转移到其它URL;

404 - 请求的资源(网页等)不存在;

500 - 内部服务器错误。


11.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

分为4个步骤:


(1)当发送一个 URL 请求时,不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL,浏览器都会开启一个线程来处理这个请求,同时在远程 DNS 服务器上启动一个 DNS 查询,这能使浏览器获得请求对应的 IP 地址。


(2)浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。


(3)一旦 TCP/IP 连接建立,浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源,值为 200 的 HTTP 响应状态表示一个正确的响应。


(4)此时,Web 服务器提供资源服务,客户端开始下载资源。


12.ajax请求时,如何解释json数据

       使用eval()或者JSON.parse() 鉴于安全性考虑,推荐使用JSON.parse()更靠谱,对数据的安全性更好。


13.请说出几种减低页面加载时间的方法

(1)压缩css、js文件;

(2)合并js、css文件,减少http请求;

(3)外部js、css文件放在最底下;

(4)减少dom操作,尽可能用变量替代不必要的dom操作。


相关文章
|
5月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
142 2
|
6月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
7月前
|
存储 监控 安全
ajax面试题总结
ajax面试题总结
59 1
|
4月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
60 18
|
3月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
87 1
|
5月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
6月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
130 57
|
6月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
4月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
5月前
|
JSON 前端开发 JavaScript
跨越跨域大山,前端不得不知道的Ajax
该文章介绍了AJAX技术的基本使用方法,包括GET和POST请求的模拟,并探讨了浏览器同源策略及其对跨域请求的影响,同时还提出了JSONP和CORS作为解决跨域问题的方案。

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    详解智能编码在前端研发的创新应用
  • 6
    巧用通义灵码,提升前端研发效率
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    智能编码在前端研发的创新应用
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 10
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目