面試官在問了一些常見的技術後 總會問各種原理，比如 ajax 原理 http原理 mvvm原理等。
像這些原理，範圍很廣，知識面很多，回答這些問題真的不好回答。
但是我們可以把原理拆分成個個小的知識點，然後分別作答。回答流程如下：
1、如果是英文詞彙就先翻譯成中文
2、一句話描述該技術的用途
3、描述該技術的核心概念或運作流程
4、口述該技術的代碼書寫思路
5、該技術的優點
6、該技術的缺點
7、如何彌補缺點
8、擴展其它知識點
比如問 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 請求的區別。
GET請求可以將查詢字符串參數追加到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')
Ajax技術缺點是被瀏覽器限制不能跨域。想要跨越就要用到 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 請求創建繁瑣的問題， 需要四個步驟，而 fetch() 是一個高級API可以直接調用。但是人們並不喜歡 fetch() 來發送請求，除了它的錯誤機制之外還有就是存在瀏覽器兼容的問題，於是使用第三方庫 Axios 庫來發送請求。
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方式，豐富的配置項，支持攔截器等高級配置。所以目前大部分開發都會在項目中使用。
從一個功能點擴展了多個知識點，這就是我們回答問題的思路，能在各種技術之間遊刃有餘的切換，才說明你的前端知識體系足夠豐富，其實面試的過程中更多的是要讓自己多說，而不是讓面試官都不知道你擅長什麼而按照他們自己想法去問。要更多的表現自己的優勢。
