摘要:表單最原始的是如何通信的基本通信原理瀏覽器可以發出請求與接收響應,實現在頁面不刷新的情況下和服務端進行數據交互。響應的狀態為或者。
1、什么是瀏覽器的同源政策限制?
端口,域名,協議 ,只要一個不一樣就跨域2、前后端如何通信?
常見通信的幾種方式
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表單,最后返回一個新的網頁。
缺點:
1、單項提交,頁面會發生跳轉或刷新,導致用戶體驗不好
3、浪費寬帶。
改用ajax。
了解Websocket
建立在TCP協議之上,與HTTP協議有著良好的兼容性3、跨域通信有幾種?
引JSONP
Hash(url#后面的,改變頁面不刷新)
postMessage(H5中新增的)
WebSocket
CORS
介紹以下最常用的JSONP
1.JSONP原理
利用