前端问原理应该怎么答？

回答流程如下：

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 或后台转发彻底解决跨域问题

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