前端问原理应该怎么答？

深藏阁楼爱情的钟 2023-01-22 04:50 123阅读 0赞

## 回答流程如下： ##

> 1.  如果是英文词汇就先翻译成中文
> 2.  一句话描述该技术的用途
> 3.  描述该技术的核心概念或运作流程
> 4.  口述该技术的代码书写思路
> 5.  该技术的优点
> 6.  该技术的缺点
> 7.  如何弥补缺点

## 接下来实战： ##

**请问 AJAX 的原理是什么？**

1.  AJAX 就是异步的 JS 和 XML 的缩写，目前我们一般用 JSON 代替 XML。
2.  AJAX 主要用于在不刷新页面的情况下向浏览器发起请求并接受响应，最后局部更新页面。
3.  该技术最核心概念是 XMLHttpRequest 对象，该对象可发起 HTTP 请求，我们可以监听其 readystate 的变化获得响应。
4.  具体代码是这样的 blablabla
5.  优点刚才说了，无刷新请求。
6.  缺点是被浏览器限制不能跨域。
7.  想要跨越就要用到 JSONP 或 CORS 了。

接下来面试官可能问**JSONP 的原理**，解题思路如下：

1.  JSONP 是 json with padding 的缩写
2.  该技术通过 script 不受同源策略限制来达到跨域的目的
3.  该技术核心是前端构造 script 发起 get 请求，后端将数据放到 js 回调里，前端接受响应后执行回调拿到数据
4.  具体代码是 blablabla
5.  优点是通过简单的约定就能跨域
6.  缺点是不支持 get 以外的动词，而且存在 csrf 风险
7.  解决办法是 CORS 或 csrf token

你看，按照我的步骤就能得满分。

面试官可能还会再问**CORS 的原理**，答题示例：

1.  CORS 是跨域资源共享的缩写
2.  该技术通过在目标域名返回 CORS 响应头来达到获取该域名的数据的目的
3.  改技术核心就是设置 response header，分为简单请求和复杂请求两种
4.  简单请求只需要设置 Access-Control-Allow-Origin: 目标源 即可，复杂请求则分两步走，第一步是浏览器发起 OPTIONS 请求，第二步才是真实请求。OPTIONS 请求需要把服务器支持的操作通过响应头来表明，如 Access-Control-Allow-Methods: POST, GET, OPTIONS，另外一个重要的响应头是 Access-Control-Allow-Credentials: true 用来表明是否接受请求中的 Cookie。blablabla
5.  优点是通过简单的配置就能跨域
6.  缺点是某些古老浏览器不支持 CORS 或不支持 Credentials
7.  解决办法是用 JSONP 或后台转发彻底解决跨域问题

> 又满分了。如果面试官继续追问后台转发的原理，你可以按这个模板继续说……