通信类

Posted 2021-01-08 bestchenyan

1、什么是同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的关键安全机制。
重点：协议 域名 端口 有一个不同就要跨域

限制的方面：

　　cookie localStorage 和 indexDB无法获取

　　DOM无法获取

　　AJAX请求不能发送

2、前后端如何通信？

 AJAX

webSocket

CORS

3、如何创建ajax

　　总结：使用XMLHttpRequest发送HTTP请求并接受响应

　　知识点：XMLHttpRequest是一个js对象，可以使用js对象的方法、事件

　　流程：

　　　　发起请求：发起一个http请求，方法GET POST HEAD PUT DELETE UPDATE

　　　　发送数据：客户端向服务端发送数据

　　　　监听状态：监听整个连接状态

　　　　接受响应：接受服务端返回的数据

 1 var ajax = function(parma) {
 2     var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
 3     var type = (parma.type || ‘get‘).toUpperCase;
 4     var url = parma.url;
 5     if (!url) { return }
 6     var data = parma.data,
 7         dataArr = [];
 8     for (var k in data) {
 9         dataArr.push(k + "=" + data[k]);
10     }
11     if (type == "GET") {
12         url = url + ‘?‘ + dataArr.join(‘&‘);
13         xhr.open(type, url);
14         xhr.send();
15     } else {
16         url.open(type, url);
17         xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencode");
18         url.send(dataArr.join("&"));
19     }
20     xhr.onload = function() {
21         if (xhr.statue === 200 || xhr.status === 304) {
22             var res;
23             if (parma.success && parma.success instanceof Function) {
24                 res = xhr.responseTest;
25                 if (typeof res === "string") {
26                     res = JSON.parse(res);
27                     parma.success(xhr, res);
28                 }
29             } else {
30                 if (parma.error && parma.error instanceof Function) {
31                     parma.error(xhr, res);
32                 }
33             }
34         }
35     }
36 }

5、跨域的几种方式

　　JSONP

 1 <!-- 1、JSONP -->
 2 <script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
 3 <script type="text/javascript">
 4 //jsonp利用script标签可以绕过跨域限制，以下是回调函数
 5  jsonp({
 6      data: {
 7 
 8     },
 9  });
10 // JSONP的缺点：只支持GET，容易遭受XSS（cross-site scripting） 跨域脚本攻击
11 </script>

　　Hash  URL中#后面的部分，hash改变页面不刷新

 1 <!-- 2、Hash -->
 2 <script type="text/javascript">
 3 //利用Hash，场景是当前页面A通过iframe或者frame嵌入了跨域的页面B
 4 //在A中伪代码如下
 5 var B = document.getElementByTagName(‘iframe‘);
 6 B.src = B.src + ‘#‘ + ‘data‘;
 7 //在B中的伪代码如下：
 8 window.onhashchenge = function() {
 9     var data = window.location.hash;
10 }
11 </script>
12 <!-- end -->

　　postMessage

 1 <!-- 3、postMessage -->
 2 <script type="text/javascript">
 3 //窗口A向窗口B发送信息
 4 window.postMessage(‘data‘, ‘http://B.com‘);
 5 //在窗口B中监听
 6 window.addEventListener(‘message‘, function(event) {
 7     console.log(event.origin);
 8     console.log(event.source);
 9     console.log(event.data);
10 }, false);
11 </script>
12 <!-- end -->

　　webSocket

 1 <!-- 4、webSocket -->
 2 <script type="text/javascript">
 3 //var ws = new WebSocket(url,[protocols]);
 4 var ws = new WebSocket(‘wss://echo.websocket.org‘);
 5 //用于连接打开事件的事件监听器
 6 ws.onopen = function(evt) {
 7     console.log("Connection open ...");
 8     ws.send(‘Hello WebSocket‘);
 9 }
10 //一个用于消息事件的事件监听器
11 ws.onmessage = function(evt) {
12     console.log("Receive Message:", evt.data);
13     ws.close();
14 }
15 ws.onclose = function(evt) {
16     console.log("Connection closed");
17 }

　　CORS支持跨域通信的Ajax

 1 <!-- 5、CORS -->
 2 <script type="text/javascript">
 3 //url 必选 options 可选
 4 fetch(‘url‘,{
 5     method:‘get‘,
 6 }).then(function(response){
 7 
 8 }).catch(function(err){
 9     //出错了，等价于then的第二个参数，但这样更好用更直观
10 })
11 </script>
12 <!-- end -->