如何回答面试中提问的各种原理？

Question

面试官在问了一些常见的技术后 总会问各种原理，比如 ajax 原理 http 原理 mvvm 原理等。

像这些原理，范围很广，知识面很多，回答这些问题真的不好回答。

但是我们可以把原理拆分成个个小的知识点，然后分别作答。回答流程如下：

1、如果是英文词汇就先翻译成中文

2、一句话描述该技术的用途

3、描述该技术的核心概念或运作流程

4、口述该技术的代码书写思路

5、该技术的优点

6、该技术的缺点

7、如何弥补缺点

比如问 ajax 的原理是什么？我们可以这样回答。

1、Ajax，是对 Asynchronous JavaScript + XML的简写。

2、这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验

3、Ajax技术的核心是 XMLHttpRequest 对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。

4、具体用法如下：

（1）创建XHR对象要使用 XMLHttpRequest 构造函数。

（2）在使用XHR对象时，要调用的第一个方法是 open() ，它接受3个参数：要发送的请求的类型（ 'get' 、 'post' 等）、请求的URL和表示是否异步发送请求的布尔值。

（3）要发送特定的请求，必须用 send() 方法，这里的 send() 方法接收一个参数，即要作为请求主体发送的数据。

var xhr = new XMLHttpRequest();
xhr.open('get', 'example.txt', false);
xhr.send(null);
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
  alert(xhr.responseText);
} else {
  alert('Request was unsuccessful: ' + xhr.status);
}

请求是同步的，JavaScript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，responseText ：作为响应主体被返回的文本。status ：响应的HTTP状态。

发送异步请求，能让JavaScript继续执行而不必等待响应。此时，可以检测XHR对象的 readyState 属性，只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件。

var xhr = createXHR();
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
       alert(xhr.responseText);
    } else {
       alert('Request was unsuccessful: ' + xhr.status);
    }
  }
};
xhr.open('get', 'example.txt', true);
xhr.send(null);

在接收到响应之前还可以调用 abort() 方法来取消异步请求

讲解了同步和异步的区别之外，我们还可以讲 GET 和 POST 请求的区别。

可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。位于传入 open() 方法的URL末尾的查询字符串必须经过正确的编码才行。查询字符串中每个参数的名称和值都必须使用 encodeURIComponent() 进行编码，然后才能放到URL的末尾；而且所有名-值对儿都必须由和号（&）分隔，如下面的例子所示。

xhr.open('get', 'example.php?name1=value1&name2=value2', true);

POST 请求的主体可以包含非常多的数据，而且格式不限。在 open() 方法第一个参数的位置传入 “post” ，就可以初始化一个 POST 请求。我们可以使用XHR来模仿表单提交：首先将 Content-Type 头部信息设置为 application/x-www-form-urlencoded ，也就是表单提交时的内容类型，其次是内容格式跟查询字符串相同。

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name1=value1&name2=value2')

缺点是被浏览器限制不能跨域。想要跨越就要用到 JSONP 或 CORS 了。

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。

CORS（Cross-Origin Resource Sharing，跨源资源共享）CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

简单请求只需要设置 Access-Control-Allow-Origin: 目标源，即可，复杂请求则分两步走，第一步是浏览器发起 OPTIONS 请求，第二步才是真实请求。OPTIONS 请求需要把服务器支持的操作通过响应头来表明，如 Access-Control-Allow-Methods: POST, GET, OPTIONS，另外一个重要的响应头是 Access-Control-Allow-Credentials: true 用来表明是否接受请求中的 Cookie。默认跨域是不会携带Cookie，这样是为了安全。

JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。下面是一个典型的JSONP请求。

http://freegeoip.net/json/?callback=handleResponse

JSONP是通过动态 <script> 元素来使用的，使用时可以为 src 属性指定一个跨域URL。这里的 <script> 元素与 <img> 元素类似，都有能力不受限制地从其他域加载资源。因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。

然后我们可以扩展一下，聊一聊fetch请求。

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

fetch 是全局量 window 的一个方法，它的主要特点有：
1、第一个参数是URL
2、第二个是可选参数，是个配置对象
3、使用了 Promise 来处理返回结果

默认情况下, fetch 在服务端不会发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求，如果想要在同域中自动发送 cookie 加上 credentials 的 same-origin 选项。对于CORS请求，使用include值允许将凭据发送到其他域。

从 fetch() 返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。

一部分的解决了 Ajax 创建xhr对象繁琐的问题， xhr创建需要四个步骤，而 fetch() 是一个高级API可以直接调用。但是人们并不喜欢 fetch() 来发送请求，除了它的错误机制之外还有就是存在浏览器兼容的问题，于是使用第三方库 Axiox 库来发送请求。

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1、从浏览器中创建 XMLHttpRequests
2、从 node.js 创建 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持防御 XSRF

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

由于 Axios 扩展性强，支持node端和浏览器端，同样的API，node和浏览器全支持，平台切换无压力。支持 Promise
使用Promise管理异步，告别传统callback方式，丰富的配置项，支持拦截器等高级配置。所以目前大部分开发都会在项目中使用。

从一个功能点扩展了多个知识点，这就是我们回答问题的思路，能在各种技术之间游刃有余的切换，才说明你的前端知识体系足够丰富，其实面试的过程中更多的是要让自己多说，而不是让面试官都不知道你擅长什么而按照他们自己想法去问。要更多的表现自己的优势。