對先後端通訊的基本瞭解——如何通訊、跨域？

一、什麼是瀏覽器的同源政策限制？

端口，域名，協議 ，只要一個不同就跨域

---

二、先後端如何通訊？

---

常見通訊的幾種方式

Ajax : 短鏈接
Websocket : 長鏈接，雙向的。
CORS fetch()
Form表單（最原始的）

---

Ajax是如何通訊的

基本通訊原理：
瀏覽器能夠發出HTTP請求與接收HTTP響應，實如今頁面不刷新的狀況下和服務端進行數據交互。
實現過程：
1) 建立XMLHttpRequest對象（異步調用對象）
var xhr = new XMLHttpRequest();
2) 建立新的Http請求（方法、URL、是否異步）
xhr.open(‘get’,’example.php’,false);
3) 設置響應HTTP請求狀態變化的函數。
onreadystatechange事件中readyState屬性等於4。響應的HTTP狀態爲status==200(OK)或者304(Not Modified)。
4) 發送http請求
xhr.send(data);
5) 獲取異步調用返回的數據
優勢：
提升用戶體驗，較少網絡數據的傳輸量

---

Fome表單是如何通訊

基本通訊原理：
經過form表單以post/get方式提交數據。
實現過程：
當你點擊submit按鈕時，瀏覽器會默認把你在input裏面輸入的數據，以post或get的方式提交到form表單中的action這個地址。至關於你提交表單時，就會向服務器發送一個請求，而後服務器會接受並處理提交過來的form表單，最後返回一個新的網頁。
缺點：
一、單項提交，頁面會發生跳轉或刷新，致使用戶體驗很差
三、浪費寬帶。
改用ajax。

---

瞭解Websocket

創建在TCP協議之上，與HTTP協議有着良好的兼容性

---

三、跨域通訊有幾種？

引JSONP
Hash（url#後面的，改變頁面不刷新）
postMessage（H5中新增的）
WebSocket
CORS

---

介紹如下最經常使用的JSONP

1.JSONP原理
利用<script元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 數據。JSONP請求必定須要對方的服務器作支持才能夠。
2.JSONP和AJAX對比
JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬於同源策略，JSONP屬於非同源策略（跨域請求）
3.JSONP優缺點
JSONP優勢是兼容性好，可用於解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具備侷限性

---

四、GET與post區別？

POST與GET的區別 一、GET請求會被瀏覽器主動緩存，而POST不會 二、GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中參數不會被保留 三、GET請求在URL中傳送的參數是有長度限制的，而POST沒有限制 四、GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息 本質上都創建在TCP連接上