前端面试大全（Ajax篇——面试官这样问，你答得上来吗？）

面试系列

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

• 前端面试大全（序篇）：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
• 前端面试大全（jQuery篇——含移动端常见问题）:https://blog.csdn.net/cainiaoyihao_/article/details/117281709
• 前端面试大全（JavaScript篇——面试利器值得拥有！）：https://blog.csdn.net/cainiaoyihao_/article/details/117355120

内容介绍

  前端面试大全（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状态码有那些？分别代表是什么意思？

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

5、一个页面从输入URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

①、注

这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，而高手可以根据自己擅长的领域自由发挥，从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

---

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

---

欢迎评论留言!