前后端通信类

1 什么是同源策略及限制

源包括三个：协议，域名，端口

不是一个源的文档，没有权利去操作另一个源的文档，比如： ️

• Cookie\LocalStorage\IndexDB无法读取；

• ️ DOM无法获得；

• ️ AJAX请求无法发送

2 前后端如何通信

• ️ AJAX

• ️ WebSocket

• ️ CORS

---

3 如何创建Ajax

XHR对象的工作流程，兼容性处理，事件的触发条件和顺序 参考文档 zh.javascript.info/xmlhttprequ…

使用 XMLHttpRequest GET 方式请求数据的典型代码：

let xhr = new XMLHttpRequest();

xhr.open('GET', '/my/url');

xhr.send();

xhr.onload = function() {
  if (xhr.status != 200) { // HTTP 出错？
    // 处理错误
    alert( 'Error: ' + xhr.status);
    return;
  }

  // 从 xhr.response 中获取响应
};

xhr.onprogress = function(event) {
  // 报告进度
  alert(`Loaded ${event.loaded} of ${event.total}`);
};

xhr.onerror = function() {
  // 处理非 HTTP 错误（如网络中断）
};  

方法open() 初始化一个请求，或者是重新初始化一个存在的请求。

方法 send ()将请求发送到服务器。 如果请求是异步的(这是默认的) ，那么一旦请求被发送并且结果使用事件被传递，这个方法就会返回。 如果请求是同步的，那么这个方法在响应到达之前不会返回。

4 跨域通信端几种方式：

JSONP, Hash, postMessage,WebSocket, CORS

• JSONP（JSON with Padding）

利用script标签的异步加载实现。由于同源策略，一般来说位于server1.example.com 的网页无法与 server2.example.com 的服务器沟通，而HTML的 script元素是一个例外。
利用 script 元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。
用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器运行而不是用JSON解析器解析。

• 通过location.hash跨域

在 url 中，www.a.com#la 的 "#la" 就是 location.hash，改变 hash 值不会导致页面刷新，所以可以利用 hash 值来进行数据的传递，当然数据量是有限的。

• Window.postMessage()

otherWindow.postMessage(message, targetOrigin, [transfer]);  

• WebSocket
• CORS