您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

前端面试大全(Ajax篇——面试官这样问,你答得上来吗?)

目录

        • 面试系列
        • 内容介绍
        • 1、Ajax 是什么? 如何创建一个Ajax?
          • ①、Ajax
          • ②、异步
          • ③、步骤
        • 2、同步和异步的区别?
          • ①、同步
          • ②、异步
        • 3、如何解决跨域问题?
        • 4、http状态码有那些?分别代表是什么意思?
        • 5、href属性
          • ①、注
          • ②、详细版
          • ③、简洁版
        • 6、请解释JSONP 的工作原理,以及它为什么不是真正的AJAX。
        • 7、请解释一下JavaScript 的同源策略
        • 8、为什么要有同源限制?
        • 9、创建ajax过程
          • ①、步骤
          • ②、代码
        • 10、常见web安全及防护原理
          • ①、sql注入原理
          • ②、XSS原理及防范
          • ③、XSS防范方法
          • ④、XSS与CSRF有什么区别吗?
          • ③、CSRF的防御
        • 11、HTTP和HTTPS
        • 12、为什么HTTPS安全
        • 13、GET和POST的区别,何时使用POST?
          • ①、跳转
          • ②、假链接
          • ③、假链接
        • 14、ajax的缺点和在IE下的问题?
          • ①、ajax的缺点
          • ②、IE缓存问题
          • ③、Ajax请求的页面历史记录状态问题
        • 15、说说你对Promise的理解
          • ①、Promise
          • ②、Promise 的构造函数
        • 16、前端需要注意哪些SEO
        • 17、web开发中会话跟踪的方法有哪些
        • 18、什么是Ajax和JSON,它们的优缺点。
          • ①、Ajax优点:
          • ②、Ajax缺点:
          • ③、JSON优点:

面试系列

后续更新分类将同步更新系列目录:

  • 前端面试大全(序篇):https://blog.csdn.net/cainiaoyihao_/article/details/116518423
  • 前端面试大全(HTML篇):https://blog.csdn.net/cainiaoyihao_/article/details/116519021
  • 前端面试大全(CSS篇——1/2):https://blog.csdn.net/cainiaoyihao_/article/details/116521551
  • 前端面试大全(CSS篇——2/2):https://blog.csdn.net/cainiaoyihao_/article/details/117020429
  • 前端面试大全(Ajax篇):https://blog.csdn.net/cainiaoyihao_/article/details/116979060

内容介绍

  前端面试大全(Ajax篇)。

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

①、Ajax

ajax的全称:Asynchronous Javascript And XML。异步传输+js+xml。

②、异步

所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验

③、步骤
  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
  • 设置响应HTTP请求状态变化的函数
  • 发送HTTP请求
  • 获取异步调用返回的数据
  • 使用JavaScript和DOM实现局部刷新

ajax是一种创建交互式网页的计算

2、同步和异步的区别?

同步的概念应该是来自于OS中关于同步的概念:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式).同步强调的是顺序性.谁先谁后.异步则不存在这种顺序性

①、同步

同步:浏览器访问服务器请求,用户看得到页面刷新,重新发请求,等请求完,页面刷新,新内容出现,用户看到新内容,进行下一步操作。

②、异步

异步:浏览器访问服务器请求,用户正常操作,浏览器后端进行请求。等请求完,页面不刷新,新内容也会出现,用户看到新内容。

3、如何解决跨域问题?

jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

4、http状态码有那些?分别代表是什么意思?

状态码类型说明
100Continue继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息
200OK正常返回信息
201Created请求成功并且服务器创建了新的资源
202Accepted服务器已接受请求,但尚未处理
301Moved Permanently请求的网页已永久移动到新位置。
302Found临时性重定向。
303See Other临时性重定向,且总是使用GET 请求新的URI。
304Not Modified自从上次请求后,请求的网页未修改过。
400Bad Request服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401Unauthorized请求未授权。
403Forbidden禁止访问。
404Not Found找不到如何与URI 相匹配的资源。
500Internal Server Error最常见的服务器端错误。
503Service Unavailable服务器端暂时无法处理请求(可能是过载或维护)

5、href属性

①、注

这题胜在区分度高,知识点覆盖广,再不懂的人,也能答出几句,而高手可以根据自己擅长的领域自由发挥,从URL规范、HTTP协议、DNS、CDN、数据库查询、到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等;

②、详细版
  • 浏览器会开启一个线程来处理这个请求,对URL 分析判断如果是http 协议就按照Web 方式来处理;
  • 调用浏览器内核中的对应方法,比如WebView 中的loadUrl 方法;
  • 通过DNS解析获取网址的IP地址,设置UA 等信息发出第二个GET请求;
  • 进行HTTP协议会话,客户端发送报头(请求报头);
  • 进入到web服务器上的Web Server,如Apache、Tomcat、NodeJS 等服务器;
  • 进入部署好的后端应用,如PHP、Java、JavaScript、Python 等,找到对应的请求处理;
  • 处理结束回馈报头,此处如果浏览器访问过,缓存上有对应资源,会与服务器最后修改时间对比,一致则返回304;
  • 浏览器开始下载html文档(响应报头,状态码200),同时使用缓存;
  • 文档树建立,根据标记请求所需指定MIME类型的文件(比如css、js),同时设置了cookie;
  • 页面开始渲染DOM,JS根据DOM API操作DOM,执行事件绑定等,页面显示完成。
③、简洁版
  • 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;
  • 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等);
  • 浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM);
  • 载入解析到的资源文件,渲染页面,完成。

6、请解释JSONP 的工作原理,以及它为什么不是真正的AJAX。

jsonp的工作原理是,动态的创建了一个全局方法,并且动态生成script标签请求数据,在请求回来的数据中是执行请求是动态生成的js方法,并且传递参数是请求的数据,生成了假象的ajax

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

同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。
它的精髓很简单:它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。
这里的同源指的是:同协议同域名同端口

8、为什么要有同源限制?

我们举例说明:比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

9、创建ajax过程

①、步骤
  • 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
  • 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
  • 设置响应HTTP请求状态变化的函数.
  • 发送HTTP请求.
  • 获取异步调用返回的数据.
  • 使用JavaScript和DOM实现局部刷新.
②、代码
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET','demo.php','true');
xmlHttp.send()
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 & xmlHttp.status === 200){
}
}

10、常见web安全及防护原理

①、sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。

总的来说有以下几点:

  • 永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。
  • 永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
  • 永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。
  • 不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。
②、XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如:攻击者在论坛中放一个

看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单

当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。

③、XSS防范方法
  • 代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。
  • 首先,避免直接在cookie 中泄露用户隐私,例如email、密码等等。
  • 其次,通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值,不可能拿来重放。
  • 如果网站不需要再浏览器端对cookie 进行操作,可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie 。
  • 尽量采用POST 而非GET 提交表单
④、XSS与CSRF有什么区别吗?

XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,需要知道其他 用户页面的代码和数据包。

要完成一次CSRF攻击,受害者必须依次完成两个步骤:

  • 登录受信任网站A,并在本地生成Cookie。
  • 在不登出A的情况下,访问危险网站B。
③、CSRF的防御
  • 服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。
  • 通过验证码的方法

11、HTTP和HTTPS

  • HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS。

  • 默认HTTP的端口号为80,HTTPS的端口号为443。

12、为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS,密钥在你和终点站才有。https之所以比http安全,是因为他利用ssl/tls协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性

13、GET和POST的区别,何时使用POST?

①、跳转
②、假链接
③、假链接

GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制。

区别
GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。

然而,在以下情况中,请使用POST请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比GET 更稳定也更可靠

14、ajax的缺点和在IE下的问题?

①、ajax的缺点
  • ajax不支持浏览器back按钮。
  • 安全问题AJAX暴露了与服务器交互的细节。
  • 对搜索引擎的支持比较弱。
  • 破坏了程序的异常机制。
  • 不容易调试。
②、IE缓存问题

在IE浏览器下,如果请求的方法是GET,并且请求的URL不变,那么这个请求的结果就会被缓存。解决这个问题的办法可以通过实时改变请求的URL,只要URL改变,就不会被缓存,可以通过在URL末尾添加上随机的时间戳参数(‘t’= + new Date().getTime())
或者
open(‘GET’,‘demo.php?rand=+Math.random()’,true);//

③、Ajax请求的页面历史记录状态问题
  • 可以通过锚点来记录状态,location.hash。让浏览器记录Ajax请求时页面状态的变化。
  • 还可以通过HTML5的history.pushState,来实现浏览器地址栏的无刷新改变

15、说说你对Promise的理解

①、Promise

依照Promise/A+ 的定义,Promise 有四种状态

  • pending: 初始状态, 非fulfilled 或rejected.
  • fulfilled: 成功的操作.
  • rejected: 失败的操作.
  • settled: Promise已被fulfilled或rejected,且不是pending

另外,fulfilled 与rejected 一起合称settled。

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算。

②、Promise 的构造函数

构造一个Promise,最基本的用法如下:

var promise = new Promise(function(resolve, reject) {
 if (...) {  // succeed
resolve(result);
 } else {   // fails
reject(Error(errMessage));
}
});

Promise 实例拥有then 方法(具有then 方法的对象,通常被称为thenable)。它的使用方法如下:

promise.then(onFulfilled, onRejected)

接收两个函数作为参数,一个在fulfilled 的时候被调用,一个在rejected 的时候被调用,接收参数就是future,onFulfilled 对应resolve, onRejected 对应reject。

16、前端需要注意哪些SEO

  • 合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;
  • description把页面内容高度概括,长度合适,不可 过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可
  • 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
  • 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
  • 重要内容不要用js输出:爬虫不会执行js获取内容
  • 少用iframe:搜索引擎不会抓取iframe中的内容
  • 非装饰性图片必须加alt
  • 提高网站速度:网站速度是搜索引擎排序的一个重要指标

17、web开发中会话跟踪的方法有哪些

  • cookie
  • session
  • url重写
  • 隐藏input
  • ip地址

18、什么是Ajax和JSON,它们的优缺点。

Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

①、Ajax优点:
  • 可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量
  • 避免用户不断刷新或者跳转页面,提高用户体验
②、Ajax缺点:
  • 对搜索引擎不友好
  • 要实现ajax下的前后退功能成本较大
  • 可能造成请求数的增加
  • 跨域问题限制

JSON是一种轻量级的数据交换格式,ECMA的一个子集

③、JSON优点:

优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)


标签:前端面试,Ajax


更多演示案例,查看 案例演示


欢迎评论留言!


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进