Hexo
0%

通信相关

Posted on Edited on In

同源策略限制从一个源（协议，域名和端口（端口默认为80））加载的文档或脚本如何与来自于另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的安全机制。

那么具体有什么限制呢？

  • Cookie、LocalStorage和IndexDB无法读取
  • DOM无法获得
  • AJAX请求不能发送

前后端通信的方法

  • Ajax（必须同源）
  • WebSocket（不限制同源策略）
  • CORS（支持跨域也支持同源）

如何创建Ajax

注意几点

  • XMLHttpRequest对象的工作流程
  • 兼容性的一些处理
  • 事件触发顺序
  • 事件触发条件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var xmlhttp = null;
// 创建xhr对象，保证兼容性
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} else {
  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP)
}

if (xmlhttp != null) {
  xmlhttp.open('GET','/example/note.html,true);
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
      var resText = xmlhttp.responseText;
      console.log(resText);
    } else {
      alert('Your browser does not support AJAX);
    }
  }
  //发送get请求括号内没有参数，post请求则需要将body作为参数传入
  xmlhttp.send(null);
}

跨域通信的方式

  • JSONP
    出现CORS之前，一直使用JSONP，原理是通过动态向客户端添加一个script元素，向服务器请求数据，在请求的url中添加serach字段，指定回调函数名字，服务器收到请求后，会将数据放在指定名字的回调中传回来。
  • Hash（#后面的东西，改变不刷新页面）
    原理是hash后面的东西改变不刷新页面，主要用在内嵌iframe的父子窗口之间的通信
  • postMessage（h5新增）
    创建目标窗口的window对象，然后通过该对象的postMessgae方法传递数据，最后目标窗口通过监听message事件接收数据。
  • WebSocket
    初始化websocket对象，设置监听事件，onopen，onmessage和onclose事件。
  • CORS（变种的Ajax，加一个origin头允许通信，需要服务器的配置，通过认知发送请求来的头部的origin）
    fetch的api

2018 年 1月 9日