博学谷前端面试题汇总 | 博学谷前端学科

# 三、前后端交互阶段

# 1、Ajax的核心是什么？

答案：XMLHttpRequest，因为创建ajax需要通过 XMLHttpRequest方法创建

# 2、什么是Ajax？Ajax作用是什么？

答案：AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.

# 3、Ajax有那些优缺点?

答案：

优点：
- 通过异步模式，提升了用户体验.
- 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
- Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
- Ajax可以实现动态不刷新（局部刷新）
缺点：
- 安全问题 AJAX暴露了与服务器交互的细节。
- 对搜索引擎的支持比较弱。
- 不容易调试。

# 4、什么是跨域？如何解决跨域问题?

答案：

首先了解下浏览器的同源策略同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，只要三者有任意一个不同，就是非同源，即跨域。（非同源就是跨域）

通过jsonp跨域
proxy跨域（在项目中配置proxy跨域，后面在学习Vue项目时会学到，这个不推荐，因为不能在生产阶段使用，只能在开发阶段使用）
后端（node、java、php、python等）在头部信息里面设置允许跨域的设置
nodejs中间件代理跨域
nginx代理跨域

# 5、JSONP原理是什么？JSONP的只限于什么请求？

JSONP 的原理很简单，就是利用 <script> 标签没有跨域限制的漏洞。通过 <script>标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时。

JSONP 使用简单且兼容性不错，但是只限于 get 请求。

# 6、token一般是存放在哪里？

Token其实就是访问资源的凭证。

一般是用户通过用户名和密码登录成功之后，服务器将登陆凭证做数字签名，加密之后得到的字符串作为token。它在用户登录成功之后会返回给客户端，客户端主要有这么几种存储方式：

存储在localStorage中，每次调用接口的时候都把它当成一个字段传给后台
存储在cookie中，让它自动发送，不过缺点就是不能跨域
拿到之后存储在localStorage中，每次调用接口的时候放在HTTP请求头的Authorization字段里

# 7、手写 XMLHttpRequest 不借助任何请求库

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    // 这里的函数异步执行，可参考之前 JS 基础中的异步模块
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.open("GET", "/api", false)
xhr.send(null)

# 8、Git 中的三种状态

答案：

已修改 modified ：表示修改了文件，但还没将修改的结果放到暂存区
已暂存 staged ：表示对已修改文件的当前版本做了标记，使之包含在下次提交的列表中
已提交 committed ：表示文件已经安全地保存在本地的 Git 仓库中

# 9、git常用命令

git提交文件

/*将单个文件添加到暂存区中*/
git add 'filename'
/*将当前所有文件添加到暂存区中*/
git add .
/*提交文件*/
git commit -m "comment"
/*添加并提交文件*/
git commit -a -m "comment"

Git分支操作（创建、删除、合并分支）

git branch                    //查看所有分支
git branch <name>             //创建分支
git checkout <name>           //切换分支
git checkout -b <name>        //创建并切换分支

git branch -d <name>          //删除分支，无法删除未被合并的分支
git branch -D <name>          //强制删除分支，可以删除未被合并的分支

git merge <branch>             //将branch分支合并到当前分支，当前分支拥有branch分支的记录，branch分支不变
git merge <branch1> <branch2>  //将分支branch1合并到branch2

git查看状态或记录

git status //  查看当前状态
git log  //显示当前分支的commit记录

回退

/*将HEAD移动到commit id对应的提交点*/
git reset <commit id>
/*工作区、暂存区和历史记录区都会被重置commit id提交点*/
git reset --hard <commit id>

# 10、常见的状态码有哪些？

答案：

状态码表示了响应的一个状态，可以让我们清晰的了解到这一次请求是成功还是失败，如果失败的话，是什么原因导致的，当然状态码也是用于传达语义的。如果胡乱使用状态码，那么它存在的意义就没有了。

2XX 成功

200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容
206 Partial Content，进行范围请求

3XX 重定向

301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和302含义类似，但是期望客户端保持请求方法不变向新的地址发出请求

4XX 客户端错误

400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源

5XX 服务器错误

500 internal sever error，表示服务器端在执行请求时发生了错误
501 Not Implemented，表示服务器不支持当前请求所需要的某个功能
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求

# 11、同步和异步的区别？

答案：

同步：当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户体验不太友好。

异步：当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率。

异步虽然好，但是有些问题是要用同步用来解决，比如有些东西我们需要的是拿到返回的数据在进行操作的（比如：登录功能）。这些是异步所无法解决的。

# 12、cookie和session的关系和区别？

答案：

1.为什么会用到cookie和session

由于http请求是一种无状态的请求，一旦数据交换完毕便会关闭请求，再次交换数据则要再次发起请求，所以服务端无法通过连接追踪会话，确定用户身份，而cookie和session则可以帮助服务端确定用户身份。

2.cookie运行流程

第一次登陆的时候，服务器返回一段数据（cookie）给浏览器，然后浏览器则需要把返回的数据存储起来。那么在第二次请求的时候，浏览器则需要发送存储起来的那段数据（cookie）给服务器，以至于让服务器确认访问用户的身份。

3.session的运行流程

而session则和cookie差不多，都是用来存储数据，确定用户身份。不同的是session是存储在服务器的，而cookie则是存储在电脑本地文件里的，一般第一次登陆的时候，服务器在存储session时会生成session_id，通过http请求头返回给浏览器，然后浏览器则会把session_id保存在cookie里，等到第二次请求的时候，浏览器则会发送session_id到服务器，服务器通过session_id获取到对应的数据来判断用户的身份。

# 13、XML和JSON的区别？

答案：

数据体积方面
- JSON相对于XML来讲，数据的体积小，传递的速度更快些。
数据交互方面
- JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
数据描述方面
- JSON对数据的描述性比XML较差
传输速度方面
- JSON的速度要远远快于XML

# 14、使用npm有哪些好处？

答案：

通过NPM，你可以安装和管理项目的依赖，并且能够指明依赖项的具体版本号，可以通过package.json文件来管理项目信息，安装项目依赖等。

# 15、 HTTP 报文的组成部分

答案：

1、请求报文

请求行 ( http 方法 + 页面地址 + http 协议 + 版本)
请求头( key + value 值)
请求体(数据部分)

2、响应报文

状态行
响应头
响应体

# 16、AJAX技术体系的组成部分有哪些？

答案：

Ajax不是一个技术，它实际上是几种技术，每种技术都有其独特这处，合在一起就成了一个功能强大的新技术。Ajax包括: 1、Javascript——JavaScript是通用的脚本语言，而Ajax应用程序就是使用JavaScript来编写的。 2、CSS——CSS为Web页面元素提供了可视化样式的定义方法。Ajax应用中，用户界面的样式可以通过CSS独立修改。 3、DOM——通过JavaScript修改DOM，Ajax应用程序可以在运用时改变用户界面。 4、XMLHttpRequest对象——XMLHttpRequest对象允许Web程序员从Web服务器以后台的方式来获取数据。 5、XML——可扩展的标记语言（Extensible Markup Language）具有一种开放的、可扩展的、可自描述的语言结构，它已经成为网上数据和文档传输的标准。它是用来描述数据结构的一种语言，就正如他的名字一样。他使对某些结构化数据的定义更加容易，并且可以通过他和其他应用程序交换数据。 6、HTM——称为超文本标记语言，是一种标识性的语言。

# 17、HTTP协议是无状态还是有状态？

答案：

HTTP是一种不保存状态，即无状态（ stateless ）协议。 HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别，协议对于发送过的请求或响应都不做持久化处理。使用HTTP协议，每当有新的请求发送时，就会有对应的新响应产生。协议本身并不保留之前一切的请求或者响应报文的信息。这是为了更快地处理大量事务，确保协议的可伸缩性，而特意把HTTP协议设计成如此简单的。

随着 WEB 的不断发展，因无状态而导致业务处理变得棘手的情况增多了。为了实现期望的保持状态功能，于是引入了 Cookie 技术。有了Cookie 再用HTTP协议通信，就可以管理状态了。

答案：

cookie与session的区别

cookie数据存放在客户端上，session数据放在服务器上；

cookie不是很安全，且保存数据有限（单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie）；

session一定时间内保存在服务器上,当访问增多，占用服务器性能。

session与token的区别

作为身份认证，token安全性比session好；

Session 认证只是简单的把User 信息存储到Session 里。而Token 提供的是认证和授权，认证是针对用户，授权是针对App 。其目的是让某App有权利访问某用户的信息。

token与cookie的区别

Cookie是不允许垮域访问的，但是token是支持的，前提是传输的用户认证信息通过HTTP头传输；

token就是令牌，比如你授权（登录）一个程序时，他就是个依据，判断你是否已经授权该软件；cookie就是写在客户端的一个txt文件，里面包括你登录信息之类的，这样你下次在登录某个网站，就会自动调用cookie自动登录用户名；session和cookie差不多，只是session是写在服务器端的文件，也需要在客户端写入cookie文件，但是文件里是你的浏览器编号.Session的状态是存储在服务器端，客户端只有session id；而Token的状态是存储在客户端。

# 19、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

答案：

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie数据大小不能超过4k sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 sessionStorage 数据在当前浏览器窗口关闭后自动删除 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

# 20、 CORS跨域的原理？

答案：

跨域资源共享(CORS)是一种机制，是W3C标准。它允许浏览器向跨源服务器，发出XMLHttpRequest或Fetch请求。并且整个CORS通信过程都是浏览器自动完成的，不需要用户参与。而使用这种跨域资源共享的前提是，浏览器必须支持这个功能，并且服务器端也必须同意这种"跨域"请求。通常是有以下几个配置：

Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Max-Age

PS：回答配置时，可以说出前三个即可。

# 21、常见的状态码有哪些？

答案：