資訊專欄INFORMATION COLUMN
摘要：表單最原始的是如何通信的基本通信原理瀏覽器可以發(fā)出請(qǐng)求與接收響應(yīng)，實(shí)現(xiàn)在頁(yè)面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互。響應(yīng)的狀態(tài)為或者。
1、什么是瀏覽器的同源政策限制？
端口，域名，協(xié)議 ，只要一個(gè)不一樣就跨域2、前后端如何通信？
常見(jiàn)通信的幾種方式
Ajax : 短連接
Websocket : 長(zhǎng)連接，雙向的。
CORS fetch()
Form表單（最原始的）
Ajax是如何通信的
基本通信原理：
瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)，實(shí)現(xiàn)在頁(yè)面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互。
實(shí)現(xiàn)過(guò)程：
1) 創(chuàng)建XMLHttpRequest對(duì)象（異步調(diào)用對(duì)象）
var xhr = new XMLHttpRequest();
2) 創(chuàng)建新的Http請(qǐng)求（方法、URL、是否異步）
xhr.open(‘get’,’example.php’,false);
3) 設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)。
onreadystatechange事件中readyState屬性等于4。響應(yīng)的HTTP狀態(tài)為status==200(OK)或者304(Not Modified)。
4) 發(fā)送http請(qǐng)求
xhr.send(data);
5) 獲取異步調(diào)用返回的數(shù)據(jù)
優(yōu)點(diǎn)：
提高用戶體驗(yàn)，較少網(wǎng)絡(luò)數(shù)據(jù)的傳輸量
Fome表單是如何通信
基本通信原理：
通過(guò)form表單以post/get方式提交數(shù)據(jù)。
實(shí)現(xiàn)過(guò)程：
當(dāng)你點(diǎn)擊submit按鈕時(shí)，瀏覽器會(huì)默認(rèn)把你在input里面輸入的數(shù)據(jù)，以post或get的方式提交到form表單中的action這個(gè)地址。相當(dāng)于你提交表單時(shí)，就會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后服務(wù)器會(huì)接受并處理提交過(guò)來(lái)的form表單，最后返回一個(gè)新的網(wǎng)頁(yè)。
缺點(diǎn)：
1、單項(xiàng)提交，頁(yè)面會(huì)發(fā)生跳轉(zhuǎn)或刷新，導(dǎo)致用戶體驗(yàn)不好
3、浪費(fèi)寬帶。
改用ajax。
了解Websocket
建立在TCP協(xié)議之上，與HTTP協(xié)議有著良好的兼容性3、跨域通信有幾種？
引JSONP
Hash（url#后面的，改變頁(yè)面不刷新）
postMessage（H5中新增的）
WebSocket
CORS
介紹以下最常用的JSONP
