对先后端通讯的基本了解——如何通讯、跨域？

一、什么是浏览器的同源政策限制？

端口，域名，协议 ，只要一个不同就跨域

---

二、先后端如何通讯？

---

常见通讯的几种方式

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连接上