通信类

什么是同源策略及限制

从一个源加载的文档或脚本如何与来自另一个源的资源进行交互

这是一个用于隔离潜在恶意文件的关键的安全机制

源

协议

域名

端口 (默认80)

限制

Cookie LocalStorage IndexDB无法读取

DOM无法获得

Ajax请求不能发送/Ajax仅适用同源

前后端如何通信

Ajax

同源下的通信方式

WebSocket

不受同源策略的限制

CORS

既支持同源，也支持跨域

如何创建Ajax

XMLHttpRequest对象的工作流程

兼容性处理

事件的触发条件

事件的触发顺序

跨域通信的几种方式

JSONP

原理

使用script标签的异步加载实现。

即script标签src属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域

前后端通信

实现

Hash

原理

hash的改变不会刷新页面

seach刷新页面

浏览器跨标签通信，可以跨域但不通过服务器

实现

postMessage

原理

H5新增

浏览器跨标签通信，可以跨域但不通过服务器

同源策略目标是限制跨域通信，在实际业务中又需要跨域通信

实现

WebSocket

原理

前后端通信

实现

CORS

原理

可理解为支持跨域通信的Ajax，是一个新的通信标准

浏览器会拦截Ajax请求，感觉如果是跨域的，会在http头中加一个original允许跨域通信

前后端通信

实现

fetch

源码

/source/mvvm/

jsonp.js

ajax.html